:root{
  --verde:#7cc242;
  --verde-escuro:#5da02c;
  --tinta:#1c2119;
  --tinta-suave:#68716a;
  --fundo:#fbfcfa;
  --superficie:#fff;
  --linha:#e6e9e4;
  --livre:#f2f8ec;
  --raio:10px;
}
*{box-sizing:border-box}

/* ---- primitivas partilhadas ----
   O `estilo.css` e a UNICA folha carregada pelos dois layouts. O que e
   usado dos dois lados vive aqui; o resto duplica-se (§9-A).

   Estas quatro andaram anos escondidas em folhas so do backoffice: o `.ok`
   no dia.css e o `.titulo-seccao` no caixa.css. Resultado: todas as
   mensagens de sucesso do site publico — "Data libertada", "Convite
   enviado" — apareciam como texto solto, sem caixa verde nenhuma. */
.ok{
  background:#eef7e6;border:1px solid #cfe3bd;color:#40651f;
  padding:.7rem .9rem;border-radius:8px;font-size:.9rem;margin:0 0 1rem;
}
.vazio{color:var(--tinta-suave);padding:2.5rem 0;text-align:center}

/* Um <summary> e um botao, nao um paragrafo. Sem isto o rato mostra o
   cursor de seleccionar texto e o duplo-clique selecciona a palavra em vez
   de abrir. */
summary{cursor:pointer;-webkit-user-select:none;user-select:none}

/* Botao pequeno. Vivia so no mensais.css, que e folha do backoffice — no
   site publico os "Nao vamos jogar" saiam como botoes crus do browser,
   cinzentos e quadrados. */
.mini{
  background:var(--superficie);border:1px solid var(--linha);border-radius:8px;
  padding:.4rem .8rem;font:inherit;font-size:.82rem;color:var(--tinta);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;
}
.mini:hover{border-color:var(--verde);background:var(--livre);color:var(--verde-escuro)}
.vazio-conta{color:var(--tinta-suave);padding:1.25rem 0;font-size:.9rem}
.titulo-seccao{font-size:1rem;margin:1.75rem 0 .75rem}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit}
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;background:var(--superficie);
  border-bottom:1px solid var(--linha);
}
.marca{
  display:inline-flex;align-items:center;text-decoration:none;
  font-weight:800;letter-spacing:.08em;
}
.marca span{color:var(--verde)}
/* O ficheiro tem 117x40 e é mostrado ao tamanho real. Maior do que isto
   começa a desfocar — para crescer mais era preciso um original melhor. */
.marca img{height:40px;width:auto;display:block}
@media (max-width:640px){
  .marca img{height:34px}
}
.topo nav{display:flex;gap:1.25rem;font-size:.9rem}
.topo nav a{color:var(--tinta-suave);text-decoration:none}
.topo nav a:hover{color:var(--tinta)}
main{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 8rem}
.cabecalho-grelha{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
h1{font-size:1.5rem;margin:0 0 .25rem}
.sub{margin:0;color:var(--tinta-suave);font-size:.9rem}
.navegacao{display:flex;gap:.5rem}
.btn-nav{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);text-decoration:none;
}
.btn-nav:hover{border-color:var(--verde)}
.btn-nav.inativo{opacity:.3}