/*
 * Casca das telas publicas: ficha, reserva, carteirinha.
 *
 * Veio de dentro do <style> do templates/publico.html na Fase 5.
 * Nenhuma regra foi reescrita - so mudou de lugar. Os tokens
 * que estavam repetidos num :root proprio sairam: agora vem do
 * tokens.css, um arquivo so para o sistema inteiro.
 */

/* Casca das páginas abertas ao público: mesmo papel das telas de
   dentro, mas sem o menu do sistema — quem está aqui não é da
   secretaria. */
*{box-sizing:border-box}
body{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(22,50,74,.045) 27px 28px),
    var(--papel);
  color:var(--tinta);margin:0;
  /* respeita o notch e a barra de gestos do celular */
  padding:calc(20px + env(safe-area-inset-top, 0px))
          calc(14px + env(safe-area-inset-right, 0px))
          calc(40px + env(safe-area-inset-bottom, 0px))
          calc(14px + env(safe-area-inset-left, 0px));
}
.folha{
  max-width:var(--largura-tela, 860px);margin:0 auto;
  background:var(--n-0);border:1px solid var(--linha);
  border-top:6px solid var(--tinta);border-radius:8px;
  box-shadow:0 12px 30px rgba(22,50,74,.10);padding:24px 26px 22px;
}
.marca{display:flex;align-items:center;gap:11px;margin-bottom:4px}
/* O logo do clube. Era um retângulo azul escrito AABB — um
   substituto até o arquivo existir. */
/* Medidas fechadas de propósito: ver o comentário no base.html. */
.marca .logo-clube{
  width:46px;height:46px;flex:0 0 46px;
  padding:0;border:0;border-radius:8px;display:block;
  object-fit:contain;
  box-shadow:0 1px 4px rgba(22,50,74,.22);
}
.marca b{font-size:1.05rem;display:block;line-height:1.2}
.marca small{color:var(--tinta-2);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em}
h1{font-size:1.3rem;margin:16px 0 4px}
.sub{color:var(--tinta-2);font-size:.87rem;margin:0 0 18px}
.obs{font-size:.8rem;color:var(--tinta-2)}
.vazio{
  border:1px dashed var(--linha);border-radius:7px;padding:20px;
  text-align:center;color:var(--tinta-2);font-size:.88rem;
  background:var(--papel);
}
.rolagem{overflow-x:auto}
a{color:var(--tinta)}
.rodape{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--linha);
  font-size:.78rem;color:var(--tinta-2);line-height:1.5;
}
@media (max-width:575px){
  body{padding:10px 8px 30px}
  .folha{padding:18px 14px 16px;border-radius:6px}
}
/* Mesmo piso de alvo de toque das telas de dentro. Estas aqui é que
   o associado abre no celular, então valem ainda mais. */
@media (hover: none), (max-width: 900px){
  button:not(.btn-close),a.botao,input[type=submit]{min-height:34px}
}
/* Deitado, a folha não pode gastar meia tela em respiro. */
@media (max-height: 500px) and (orientation: landscape){
  body{padding:10px 12px 22px}
  .folha{padding:14px 18px 14px}
  h1{font-size:1.1rem;margin:10px 0 4px}
}