@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fontes/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fontes/poppins-700.woff2) format('woff2')}

:root{
  /* Tema unico, claro. Nao ha troca por prefers-color-scheme: o sistema e a
     mesma tela para todo mundo da tesouraria, e a versao escura chegou a
     entregar campo branco com letra branca no login. Se um dia houver modo
     escuro, que seja escolha explicita de quem usa, com paleta medida. */
  color-scheme:light;

  /* Marca, extraida de verbodavida.org.br */
  --marca:#7A1025;
  --marca-escura:#631221;
  --marca-funda:#5E0C1C;
  --marca-tinta:#F9EFEF;
  --marca-borda:#E6D3D3;

  /* Azul do site escurecido. Sobre o creme #FFFDF9 o passo anterior (#1C7FA3)
     caia para 4,48:1 — reprova AA por pouco. Este da 5,44:1. */
  --acento:#18718F;
  --acento-claro:#3BA9D2;

  /* Superficie areia. Medida, nao estimada: o painel creme tem 1,25:1 contra o
     fundo — separacao suficiente para o cartao parecer elevado sem endurecer a
     tela. Cinzas frios saem; os neutros passam a ser quentes, para nao brigar
     com o bordo da marca. */
  --fundo:#EDE3D2;
  --painel:#FFFDF9;
  --campo:#FFFFFF;
  --linha:#E0D5C1;
  --txt:#1F1B16;
  --fraco:#5C5346;

  --ok:#15803D;
  --erro:#B42318;
  --atencao:#B54708;

  --raio:14px;
  --raio-p:10px;
  --sombra:0 1px 2px rgba(74,59,38,.06), 0 1px 3px rgba(74,59,38,.07);
  --sombra-alta:0 4px 12px rgba(74,59,38,.10);
  --fonte-titulo:Poppins,ui-sans-serif,system-ui,sans-serif;
  --fonte:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
/* O atributo hidden vence qualquer display:block/flex declarado depois. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--txt);font:15px/1.6 var(--fonte);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.marca-texto,.kpi .valor{font-family:var(--fonte-titulo);letter-spacing:-.02em}
a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:4px}

.pular{position:absolute;left:-9999px;top:8px;background:var(--painel);color:var(--txt);
  padding:10px 16px;border-radius:var(--raio-p);z-index:10}
.pular:focus{left:12px}

/* ------------------------------------------------------------- cabecalho */
.topo{background:linear-gradient(180deg,var(--marca) 0%,var(--marca-funda) 100%);
  color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.topo-interno{max-width:1120px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.marca{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
.marca:hover{text-decoration:none;opacity:.92}
/* A marca do ministerio num selo claro: o bordo dela sobre o bordo do
   cabecalho sumiria. Mesmo selo nos tres sistemas — e o que faz parecerem a
   mesma casa. */
.marca-selo{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#FFFDF9;box-shadow:0 1px 3px rgba(0,0,0,.2);flex:none}
.marca-selo img{width:26px;height:auto;display:block}
.marca-texto{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;
  font-family:var(--fonte-titulo);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.marca-texto b{font-size:15px;font-weight:700;letter-spacing:.01em;
  text-transform:none;color:#fff}
.nav{display:flex;align-items:center;gap:4px;flex:1 1 320px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{color:rgba(255,255,255,.82);padding:8px 12px;border-radius:999px;
  font-size:14px;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.nav a.ativo{background:#fff;color:var(--marca);font-weight:600}
.conta{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.quem{display:flex;flex-direction:column;line-height:1.25;font-size:12px;color:rgba(255,255,255,.75)}
.quem b{font-size:13px;color:#fff;font-weight:600}
/* Volta ao portal. So para quem chegou por la — quem entrou com senha deste
   sistema talvez nem tenha conta na central. */
.voltar-portal{color:rgba(255,255,255,.85);text-decoration:none;font-size:13px;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.voltar-portal:hover{background:rgba(255,255,255,.22);color:#fff}
.inline{display:inline}
.topo .link{color:rgba(255,255,255,.9)}
.link{background:none;border:0;color:var(--acento);cursor:pointer;font:inherit;padding:4px 2px}
.link:hover{text-decoration:underline}

/* ----------------------------------------------------------- estrutura */
.conteudo{max-width:1120px;margin:0 auto;padding:28px 16px 64px}
.rodape{max-width:1120px;margin:0 auto;padding:0 16px 40px;color:var(--fraco);font-size:12px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

h1{font-size:26px;font-weight:700;margin:0 0 6px}
h2{font-size:17px;font-weight:600;margin:30px 0 12px}
.sub{color:var(--fraco);margin:0 0 24px;max-width:70ch}
.hint{color:var(--fraco);font-size:12.5px;margin-top:6px}

/* Confirmacao de acao destrutiva, dentro da pagina. Borda de alerta porque o
   que vem depois nao tem volta pela mesma tela. */
.confirmacao{margin-top:10px;padding:12px 14px;border:1px solid var(--linha);
  border-left:3px solid var(--erro);border-radius:10px;background:var(--painel)}
.confirmacao p{margin:0 0 10px;font-size:14px;color:var(--txt)}
.confirmacao-botoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.confirmacao button.nao{border-color:var(--erro);color:var(--erro)}
/* A tabela rola na horizontal, e a linha de confirmacao ocupa a largura dela
   inteira — que e maior que a tela do celular. Sem o sticky a pergunta nascia
   cortada pela direita: a pessoa via "Desativar Fulano? As sessoes abertas" e
   nada mais, bem na hora de decidir. Presa a esquerda, ela acompanha a rolagem
   e cabe sempre. */
.linha-confirmacao > td{padding:0 0 12px}
.linha-confirmacao .confirmacao{margin-top:0;position:sticky;left:0;
  width:min(100%,calc(100vw - 72px));box-sizing:border-box}
.linha-confirmacao .confirmacao p{max-width:60ch}

/* QR do segundo fator. A moldura branca e deliberada: o codigo precisa de
   contraste maximo e de zona de silencio, entao ele nao acompanha o tema
   areia nem o modo escuro. Um QR bonito que a camera nao le nao serve. */
.qr-bloco{margin:0 0 18px;text-align:center}
.qr-bloco svg.qr{width:100%;max-width:240px;height:auto;display:block;margin:0 auto;
  background:#fff;border:1px solid var(--linha);border-radius:10px;padding:10px}
.qr-bloco figcaption{margin-top:10px}

/* "Nao consigo escanear": caminho alternativo recolhido, para nao competir
   com o QR — mas presente, porque camera quebrada nao pode travar o acesso. */
.alternativas{border-top:1px solid var(--linha);margin-top:6px;padding-top:14px}
.alternativas summary{cursor:pointer;color:var(--acento);font-size:14px;
  font-weight:600;list-style:none}
.alternativas summary::-webkit-details-marker{display:none}
.alternativas summary::before{content:"+ ";font-weight:700}
.alternativas[open] summary::before{content:"− "}
.alternativas[open] summary{margin-bottom:12px}

.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px;margin-bottom:18px;box-shadow:var(--sombra)}
.grade{display:grid;gap:16px}
@media(min-width:700px){ .g2{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr} }
/* 4 colunas so acima de 1000px: abaixo disso "R$ 2.475,00" a 27px estoura o cartao. */
@media(min-width:1000px){ .g4{grid-template-columns:repeat(4,1fr)} }

/* ------------------------------------------------------------ formulario */
label{display:block;margin:16px 0 6px;font-size:13px;font-weight:500;color:var(--txt)}
/* A cor da letra e declarada aqui de proposito, junto do fundo. Quando o fundo
   era '#FFFFFF' fixo e a letra herdava --txt, bastou o navegador estar em modo
   escuro para o campo virar branco com letra quase branca: dava para digitar a
   senha e nao ver o que se digitou. Fundo e tinta do campo andam juntos. */
input,select,textarea{width:100%;padding:11px 13px;min-height:44px;
  background:var(--campo);color:var(--txt);
  color:var(--txt);border:1px solid var(--linha);border-radius:var(--raio-p);font:inherit}
input::placeholder{color:var(--fraco);opacity:.75}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent)}
input[readonly]{background:var(--fundo);color:var(--fraco)}

button.primario{margin-top:20px;width:100%;padding:13px 20px;min-height:48px;border:0;
  border-radius:999px;background:var(--marca);color:#fff;font:inherit;font-weight:600;
  font-family:var(--fonte-titulo);cursor:pointer;box-shadow:var(--sombra);transition:filter .15s}
button.primario:hover{filter:brightness(1.1)}
button.primario:disabled{opacity:.55;cursor:not-allowed;filter:none}
.acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.acoes button,.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;min-height:40px;
  border:1px solid var(--linha);border-radius:999px;background:var(--painel);color:var(--txt);
  font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s}
.acoes button:hover,.btn:hover{border-color:var(--acento);text-decoration:none}
.acoes button.sim{border-color:var(--ok);color:var(--ok)}
.acoes button.nao{border-color:var(--erro);color:var(--erro)}
.btn.largo{width:100%;justify-content:center;margin-top:20px;min-height:46px}
/* Dentro de .acoes, a regra ".acoes button" vinha DEPOIS de "button.primario"
   na cascata e anulava o destaque — mesma especificidade, ordem decide.
   (Crase aqui quebraria o template literal do TypeScript.) */
.acoes button.primario{margin-top:0;width:auto;border:0;padding:10px 20px;min-height:40px;
  background:var(--marca);color:#fff;font-family:var(--fonte-titulo);font-weight:600}
/* ---------------------------------------------------------------- avisos */
.aviso{padding:12px 15px;border-radius:var(--raio-p);border:1px solid var(--linha);
  margin:0 0 16px;font-size:14px;background:var(--painel)}
.aviso.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 7%,var(--painel))}
.aviso.erro{border-color:color-mix(in srgb,var(--erro) 45%,transparent);color:var(--erro);
  background:color-mix(in srgb,var(--erro) 7%,var(--painel))}
.aviso.info{border-color:color-mix(in srgb,var(--acento) 45%,transparent);color:var(--acento);
  background:color-mix(in srgb,var(--acento) 7%,var(--painel))}

/* --------------------------------------------------------------- tabelas */
/* A tabela ocupa a largura do cartao; o CARTAO rola no celular. Com a tabela
   em display:block ela encolhia e o cabecalho ficava pela metade. */
.cartao:has(> table),.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--fundo)}
th{color:var(--fraco);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.vazio{color:var(--fraco);padding:32px;text-align:center}

/* ------------------------------------------------------------------ KPIs */
.kpi{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:18px;box-shadow:var(--sombra)}
.kpi .rotulo{color:var(--fraco);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.kpi .valor{font-size:26px;font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums;
  line-height:1.15;overflow-wrap:anywhere}
.kpi .nota{color:var(--fraco);font-size:12.5px;margin-top:6px}

/* ----------------------------------------------------------------- selos */
.selo{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid var(--linha);color:var(--fraco);background:var(--fundo)}
.selo.pendente{border-color:color-mix(in srgb,var(--atencao) 40%,transparent);color:var(--atencao);
  background:color-mix(in srgb,var(--atencao) 9%,var(--painel))}
.selo.associada{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 9%,var(--painel))}
.selo.rejeitada{border-color:color-mix(in srgb,var(--erro) 40%,transparent);color:var(--erro);
  background:color-mix(in srgb,var(--erro) 9%,var(--painel))}
.selo.duplicada{color:var(--fraco)}
.selo.provisoria{border-color:var(--marca-borda);color:var(--marca);background:var(--marca-tinta)}

.score{font-variant-numeric:tabular-nums;font-weight:700}
.score.alto{color:var(--ok)} .score.medio{color:var(--atencao)} .score.baixo{color:var(--fraco)}

/* ================================================================ eventos */
/* Imagem de capa em proporcao fixa 16:9 (o mesmo formato de arte que o time
   ja produz para Instagram/YouTube). object-fit:cover recorta sem distorcer. */
.capa{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--marca-tinta)}
.capa-vazia{display:grid;place-items:center;width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--marca),#3a0a14);color:#fff;
  font:700 22px/1.2 var(--fonte-titulo);text-align:center;padding:20px}

/* --- agenda (home publica) */
.hero-agenda{margin:4px 0 26px}
.hero-agenda h1{font-size:30px}
.grade-eventos{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.grade-eventos{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grade-eventos{grid-template-columns:repeat(3,1fr)}}
.card-evento{display:flex;flex-direction:column;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);color:var(--txt);
  transition:transform .15s,box-shadow .15s}
.card-evento:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.card-evento .capa,.card-evento .capa-vazia{border-bottom:1px solid var(--linha)}
.card-corpo{display:flex;gap:14px;padding:16px;align-items:flex-start}
.selo-data{flex:none;width:52px;text-align:center;border:1px solid var(--marca-borda);
  border-radius:10px;overflow:hidden;background:var(--painel)}
.selo-data .mes{display:block;background:var(--marca);color:#fff;font:600 11px/1 var(--fonte-titulo);
  padding:5px 0;letter-spacing:.06em}
.selo-data .dia{display:block;font:700 22px/1 var(--fonte-titulo);padding:7px 0 8px;color:var(--marca)}
.card-info{min-width:0}
.card-info .categoria{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--acento);font-weight:600}
.card-info h2{font-size:17px;margin:3px 0 4px;line-height:1.3}
.card-info .onde{font-size:13px;color:var(--fraco)}
.card-rodape{margin-top:auto;padding:0 16px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:8px;font-size:13px}
.preco-de{font-weight:600}

/* --- pagina do evento */
/* No celular os ingressos vem logo depois do titulo — nao no fim de uma
   descricao longa, onde ninguem acha o botao. No desktop viram coluna fixa. */
.evento-topo{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.evento-detalhes h2:first-child{margin-top:0}
@media(min-width:900px){
  .evento-topo{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  .evento-principal{grid-column:1;grid-row:1}
  .evento-detalhes{grid-column:1;grid-row:2}
  .evento-topo > .caixa-ingressos{grid-column:2;grid-row:1 / span 2}
}
.evento-capa{border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra)}
.migalha{font-size:13px;color:var(--fraco);margin-bottom:14px}
.evento-cabeca .categoria{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--acento);font-weight:600}
.evento-cabeca h1{font-size:30px;margin:4px 0 12px;line-height:1.2}
.fatos{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.fatos li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.fatos .ic{flex:none;width:22px;text-align:center;color:var(--marca)}
.faixa{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fraco);margin-top:6px}
.faixa b{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:6px;
  background:var(--txt);color:#fff;font-size:12px}
.faixa b.livre{background:var(--ok)}
.descricao{font-size:15.5px;line-height:1.7}
.descricao p{margin:0 0 14px}
.descricao ul{margin:0 0 14px;padding-left:22px}
.galeria{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio-p);border:1px solid var(--linha)}
.caixa-ingressos{position:sticky;top:16px}
.caixa-ingressos h2{margin-top:0}
.situacao{padding:12px 14px;border-radius:var(--raio-p);background:var(--fundo);font-size:14px;margin:0 0 14px}
.situacao.esgotado{background:color-mix(in srgb,var(--erro) 8%,var(--painel));color:var(--erro);font-weight:600}

/* --- seletor de ingressos */
.lista-ingressos{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.ingresso-linha{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--campo)}
.ingresso-linha.indisponivel{opacity:.62;background:var(--fundo)}
.ingresso-nome{font-weight:600;font-size:14.5px}
.ingresso-preco{font-size:14px;color:var(--marca);font-weight:600}
.ingresso-nota{font-size:12px;color:var(--fraco)}
.passo{display:flex;align-items:center;gap:4px;flex:none}
.passo input{width:48px;min-height:38px;padding:6px;text-align:center;font-weight:600}
.passo button{width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);background:var(--painel);
  font:700 18px/1 var(--fonte);color:var(--marca);cursor:pointer}
.passo button:hover{border-color:var(--marca)}
.resumo-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--linha)}
.resumo-total .valor{font:700 22px/1 var(--fonte-titulo)}

/* --- formulario de participantes */
.participante{border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;margin-bottom:14px;background:var(--campo)}
.participante legend{font:600 14px/1 var(--fonte-titulo);padding:0 6px;color:var(--marca)}
.opcoes-sim-nao{display:flex;gap:18px;margin-top:4px}
.opcoes-sim-nao label{display:flex;gap:6px;align-items:center;margin:0;font-weight:400}
.opcoes-sim-nao input{width:auto;min-height:0}
.aceite{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13.5px}
.aceite input{width:auto;min-height:0;margin-top:4px}

/* --- pix */
.pix{display:grid;gap:18px;align-items:start}
@media(min-width:700px){.pix{grid-template-columns:240px 1fr}}
.pix img{width:100%;max-width:240px;background:#fff;border:1px solid var(--linha);border-radius:10px;padding:8px;margin:0 auto;display:block}
.pix textarea{font:12px/1.4 ui-monospace,Menlo,monospace;min-height:92px;resize:none}
.relogio{font-variant-numeric:tabular-nums;font-weight:700}

/* --- ingresso (bilhete) */
.bilhetes{display:grid;gap:16px}
@media(min-width:700px){.bilhetes{grid-template-columns:1fr 1fr}}
.bilhete{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra);break-inside:avoid}
.bilhete-topo{background:var(--marca);color:#fff;padding:14px 18px}
.bilhete-topo .evento{font:700 16px/1.3 var(--fonte-titulo)}
.bilhete-topo .quando{font-size:12.5px;opacity:.85;margin-top:2px}
.bilhete-corpo{display:flex;gap:16px;padding:16px 18px;align-items:center}
.bilhete-corpo svg.qr{width:128px;height:128px;flex:none;background:#fff;border:1px solid var(--linha);border-radius:8px;padding:6px}
.bilhete-corpo .bilhete-nome{font-weight:700;font-size:16px}
.bilhete-corpo .tipo{font-size:13px;color:var(--fraco)}
.bilhete-corpo .codigo{font:700 15px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;margin-top:10px;color:var(--marca)}
.bilhete.usado{opacity:.6}

/* --- selos de status (painel) */
.selo.aguardando{border-color:color-mix(in srgb,var(--atencao) 40%,transparent);color:var(--atencao);
  background:color-mix(in srgb,var(--atencao) 9%,var(--painel))}
.selo.pago,.selo.confirmado,.selo.publicado{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 9%,var(--painel))}
.selo.pago_sem_vaga,.selo.cancelado,.selo.estornado{border-color:color-mix(in srgb,var(--erro) 40%,transparent);
  color:var(--erro);background:color-mix(in srgb,var(--erro) 9%,var(--painel))}
.selo.rascunho,.selo.encerrado,.selo.expirado{color:var(--fraco)}

/* --- painel */
.cabeca-pagina{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cabeca-pagina h1{margin:0}
.btn.primario-btn{background:var(--marca);color:#fff;border-color:var(--marca);font-weight:600}
.btn.primario-btn:hover{filter:brightness(1.1)}
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);margin:0 0 20px;overflow-x:auto}
.abas a{padding:10px 14px;color:var(--fraco);border-bottom:2px solid transparent;white-space:nowrap;font-size:14px}
.abas a.ativo{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}
.abas a:hover{text-decoration:none;color:var(--txt)}
.linha-evento{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center}
.linha-evento img,.linha-evento .mini-vazia{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  border:1px solid var(--linha);background:var(--marca-tinta)}
.miniaturas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.miniaturas figure{margin:0}
.miniaturas img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--linha)}
.barra-vagas{height:8px;background:var(--fundo);border-radius:999px;overflow:hidden;margin-top:6px;min-width:80px}
.barra-vagas span{display:block;height:100%;background:var(--marca);border-radius:999px}
.checkin-resultado{font:700 20px/1.3 var(--fonte-titulo);padding:18px;border-radius:var(--raio);text-align:center}
.checkin-resultado.ok{background:color-mix(in srgb,var(--ok) 12%,var(--painel));color:var(--ok)}
.checkin-resultado.erro{background:color-mix(in srgb,var(--erro) 10%,var(--painel));color:var(--erro)}
.checkin-resultado small{display:block;font:400 14px/1.4 var(--fonte);color:var(--txt);margin-top:6px}
video[data-leitor]{width:100%;max-width:420px;border-radius:var(--raio);background:#000;display:block;margin:0 auto 14px}
.codigo-grande{font:700 24px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center}
textarea{min-height:120px;resize:vertical;line-height:1.55}
.chk{display:flex;gap:8px;align-items:center;font-weight:400;margin:14px 0 0}
.chk input{width:auto;min-height:0}

@media print{
  .topo,.rodape,.nao-imprimir{display:none!important}
  body{background:#fff}
  .bilhete{box-shadow:none}
}
.barra-vagas span[data-p="0"]{width:0%}
.barra-vagas span[data-p="5"]{width:5%}
.barra-vagas span[data-p="10"]{width:10%}
.barra-vagas span[data-p="15"]{width:15%}
.barra-vagas span[data-p="20"]{width:20%}
.barra-vagas span[data-p="25"]{width:25%}
.barra-vagas span[data-p="30"]{width:30%}
.barra-vagas span[data-p="35"]{width:35%}
.barra-vagas span[data-p="40"]{width:40%}
.barra-vagas span[data-p="45"]{width:45%}
.barra-vagas span[data-p="50"]{width:50%}
.barra-vagas span[data-p="55"]{width:55%}
.barra-vagas span[data-p="60"]{width:60%}
.barra-vagas span[data-p="65"]{width:65%}
.barra-vagas span[data-p="70"]{width:70%}
.barra-vagas span[data-p="75"]{width:75%}
.barra-vagas span[data-p="80"]{width:80%}
.barra-vagas span[data-p="85"]{width:85%}
.barra-vagas span[data-p="90"]{width:90%}
.barra-vagas span[data-p="95"]{width:95%}
.barra-vagas span[data-p="100"]{width:100%}


/* Utilitarios. Existem porque a CSP proibe style="..." inline: todo atributo
   de estilo era silenciosamente descartado pelo navegador. */
.estreito{max-width:560px;margin-left:auto;margin-right:auto}
.estreito-p{max-width:420px;margin-left:auto;margin-right:auto}
.centro{margin-top:40px}
.sem-topo{margin-top:0}
.sem-margem{margin:0}
.espaco-topo{margin-top:18px}
.curto{max-width:150px}

@media(max-width:560px){
  h1{font-size:22px}
  .cartao{padding:18px}
  .conteudo{padding:20px 14px 56px}
  .topo-interno{gap:12px}
  .marca-texto{font-size:10px}
  .marca-texto b{font-size:14px}
  .rodape{flex-direction:column;gap:4px}
}