/* Comprovante e credenciamento: telas que nascem de um link, não da
   navegação. O comprovante precisa sair bem no papel e no PDF. */

.comprovante {
  max-width: 44rem;
  border: 2px solid var(--linha);
  border-radius: 10px;
  padding: 1.75rem;
  background: var(--papel);
}
.comprovante__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  border-bottom: 3px solid var(--escola-vivo);
  padding-bottom: 1.1rem; margin-bottom: 1.4rem;
}
.comprovante__evento { color: var(--tinta-media); margin: 0 0 .2rem; font-size: .95rem; }
.comprovante__titulo { font-size: 1.6rem; margin: 0; }
.comprovante__marca { width: 6.5rem; height: auto; flex: none; }

.comprovante__aviso {
  background: var(--familia-tenue);
  border-left: 5px solid var(--familia-vivo);
  border-radius: 0 6px 6px 0;
  padding: .7rem .9rem;
}

.comprovante__dados { display: grid; gap: 1rem 2rem; margin: 0 0 1.6rem; }
@media (min-width: 34rem) { .comprovante__dados { grid-template-columns: 1fr 1fr; } }
.comprovante__dados dt { font-size: .9rem; color: var(--tinta-media); margin-bottom: .1rem; }
.comprovante__dados dd { margin: 0; font-weight: 700; }
.comprovante__protocolo {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1.6rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--escola);
}

.comprovante__qr {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--escola-tenue);
  border-radius: 8px; padding: 1.2rem;
}
.comprovante__instrucao { flex: 1 1 14rem; color: var(--tinta-media); }
.comprovante__instrucao p { margin: 0 0 .7rem; }
.comprovante__instrucao p:last-child { margin: 0; }
.comprovante__qr svg { display: block; width: 11rem; height: 11rem; background: #fff; border-radius: 6px; }
.comprovante__pe { margin: 1.4rem 0 0; font-size: .9rem; color: var(--tinta-media); }

.acoes { margin-top: 2rem; }
.acoes p { margin: .8rem 0 0; color: var(--tinta-media); }

/* ------------------------------------------------------ credenciamento */

.presenca { max-width: 34rem; }
.presenca__selo {
  display: inline-block; margin: 0 0 .6rem;
  background: var(--saude-tenue); color: var(--saude);
  border: 2px solid var(--saude-vivo); border-radius: 6px;
  padding: .5rem 1rem; font-weight: 700;
}
.presenca--repetida .presenca__selo {
  background: var(--familia-tenue); color: var(--familia); border-color: var(--familia-vivo);
}
.presenca__nome {
  font-family: Archivo, system-ui, sans-serif; font-weight: 700;
  font-size: 1.75rem; line-height: 1.15; margin: 0 0 1.2rem;
}

/* ------------------------------------------------------------ impressão */

@media print {
  .naoimprime { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .secao { padding: 0; border: 0; }
  .envoltorio { max-width: none; padding: 0; }
  .comprovante { border: 1px solid #999; border-radius: 0; padding: 1.2rem; max-width: none; }
  .comprovante__qr { background: #fff; border: 1px solid #ccc; }
  .comprovante__aviso { background: #fff; }
  a[href]::after { content: ""; }
}

/* Os dois períodos, lado a lado: a equipe vê de relance o que falta. */
.periodos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 .9rem; }
.periodo {
  border: 2px solid var(--linha);
  border-radius: 6px;
  padding: .7rem .8rem;
  background: var(--papel);
}
.periodo__nome { display: block; font-weight: 700; }
.periodo__estado { display: block; font-size: .95rem; color: var(--tinta-media); }
.periodo--ok { border-color: var(--saude-vivo); background: var(--saude-tenue); }
.periodo--ok .periodo__estado { color: var(--saude); font-weight: 700; }
.periodo--atual { outline: 3px solid var(--escola-vivo); outline-offset: 2px; }

.presenca__certificado {
  margin: 0 0 1.2rem;
  padding: .6rem .8rem;
  border-radius: 6px;
  background: var(--familia-tenue);
  color: var(--familia);
  font-weight: 700;
}
.presenca__certificado--ok { background: var(--saude-tenue); color: var(--saude); }

/* ---------------------------------------------------------------- leitor */

.leitor { max-width: 34rem; }
/* Quadrado: o QR é quadrado e a mira fica no centro, onde a leitura pega. */
.leitor__quadro {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 22rem;
  margin: 0 0 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tinta);
}
.leitor__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leitor__mira {
  position: absolute; inset: 18%;
  border: 4px solid var(--acao);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(27, 54, 84, .35);
  pointer-events: none;
}
.leitor__desligada {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 700;
}
.leitor__estado { font-size: 1.05rem; margin: 0 0 1rem; }
.leitor__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; }
.leitor__ajuda { margin: 0 0 1.4rem; }
.leitor__ajuda summary { cursor: pointer; font-weight: 700; color: var(--escola); }
.leitor__ajuda p { margin: .7rem 0 0; }

.falha { max-width: 34rem; }
.falha .aviso { margin-bottom: 1.2rem; }
.falha__titulo { font-weight: 700; font-size: 1.15rem; }

/* --------------------------------------------- participante sem comprovante */

.sem-comprovante { max-width: 34rem; }
.sem-comprovante .formulario { margin-bottom: 1.2rem; }
.ficha { border: 2px solid var(--linha); border-radius: 8px; padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.ficha .presenca__nome { font-size: 1.4rem; margin-bottom: .9rem; }
.ficha .comprovante__dados { margin: 0 0 1.1rem; }
.ficha .presenca__nome { margin-bottom: .3rem; }
.ficha__pergunta { color: var(--tinta-media); margin: 0 0 .9rem; }
.ficha .aviso { margin-top: 1rem; }
.reenvio { margin: 1rem 0 0; }
#presenca-reenvio:not(:empty) { margin: 0 0 1.2rem; }

/* ---------------------------------------------------------- cancelamento */

.cancelar { max-width: 34rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.cancelar h2 { margin-top: 0; }
.cancelar__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.cancelar__encerrado { margin-top: 2rem; color: var(--tinta-media); max-width: 34rem; }
.opcional { font-weight: 400; color: var(--tinta-media); }
.botao--perigo { color: var(--alerta); border-color: var(--alerta); }
.botao--perigo:hover { background: var(--alerta-tenue); color: var(--alerta); border-color: var(--alerta); }
.botao--perigo-cheio { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.botao--perigo-cheio:hover { background: #a31f1f; border-color: #a31f1f; color: #fff; }
.protocolo-cancelamento { font-family: Archivo, system-ui, sans-serif; font-size: 1.3rem; letter-spacing: .02em; white-space: nowrap; }