.datas-faltas{margin:1.25rem 0}
.data-falta{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.85rem .9rem;margin-bottom:.5rem;
  border:1px solid var(--linha);border-radius:8px;cursor:pointer;
  background:var(--superficie);font-size:.95rem;color:var(--tinta);
}
.data-falta:hover{border-color:var(--verde)}
.data-falta input{width:auto;margin:0}
.df-data{font-weight:600;min-width:150px}
.df-nota{font-size:.8rem;color:var(--tinta-suave);flex:1}
.data-falta.marcada{background:#fdf8ec;border-color:#f0e0bd}

/* ---- modo "escolher os jogos": setembro e dezembro ----
   Aqui a caixa marcada quer dizer JOGAMOS, e desmarcá-la liberta a data.
   Tudo isto está preso ao `.escolher` porque na campanha dos feriados a
   caixa quer dizer o contrário — as mesmas regras soltas diriam a coisa
   errada no outro ecrã.

   A etiqueta muda com a caixa em CSS, sem JavaScript. Numa página que
   decide dinheiro, uma etiqueta que depende de um script é uma etiqueta
   que um dia não aparece, e a pessoa fica sem saber o que escolheu. */
.df-estado{
  flex:0 0 auto;font-size:.78rem;font-weight:700;
  padding:.18rem .5rem;border-radius:999px;white-space:nowrap;
}
.escolher .data-falta input:checked ~ .df-estado{
  background:var(--livre);color:var(--verde-escuro);
}
.escolher .data-falta input:not(:checked) ~ .df-estado{
  background:#f7ecd2;color:#8a6516;
}
.escolher .data-falta input:checked ~ .df-estado .e-nao{display:none}
.escolher .data-falta input:not(:checked) ~ .df-estado .e-sim{display:none}

/* O realce da linha acompanha a caixa em tempo real, e nao so o estado
   com que a pagina foi servida: quem desmarca tem de ver logo o que fez,
   antes de carregar em Guardar. */
.escolher .data-falta:has(input:checked){
  background:var(--superficie);border-color:var(--linha);
}
.escolher .data-falta:has(input:not(:checked)):not(.bloqueada){
  background:#fdf8ec;border-color:#f0e0bd;
}
.data-falta.bloqueada{opacity:.55;cursor:default;background:var(--fundo)}
.data-falta.bloqueada:hover{border-color:var(--linha)}
/* O convite a criar conta. Cartao proprio, a seguir ao que interessa —
   nunca antes: quem chega aqui vem escolher datas, nao criar contas. */
.convite-conta{margin-top:1rem;background:var(--livre);border-color:#cfe3bd}
.convite-conta h2{margin:0 0 .5rem;font-size:1.15rem}
.convite-conta ul{margin:.6rem 0 .9rem;padding-left:1.1rem;line-height:1.65}
.convite-conta li{margin-bottom:.2rem}
.nota-conta{
  font-size:.88rem;color:var(--tinta-suave);
  margin:0 0 1rem;padding-top:.7rem;border-top:1px solid #cfe3bd;
}

.selo-feriado{
  background:#e3ebf5;color:#3d6087;padding:.05rem .35rem;
  border-radius:4px;font-size:.72rem;
}

.acao-campanha{margin-bottom:1rem}
.estado-campanha{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  padding:.2rem .5rem;border-radius:5px;
}
.estado-campanha.sem{background:#f1f2f0;color:var(--tinta-suave)}
.estado-campanha.espera{background:#fdf8ec;color:#a8791f}
.estado-campanha.feito{background:#eef7e6;color:#40651f}
.campo-link{
  width:290px !important;font-size:.75rem !important;
  padding:.4rem .55rem !important;margin:0 !important;
  font-family:ui-monospace,monospace;
}

/* O botao de WhatsApp da lista da campanha.
   Duas classes de proposito: o `a.mini` do admin.css define borda e cor, e
   um `.wa` sozinho tem a mesma especificidade e vem antes na cascata — nao
   ganhava. E a licao do §6 do LEIA-ME, outra vez.
   Verde do WhatsApp, e nao o verde da casa: aqui a cor nao esta a decorar,
   esta a dizer para onde e que o botao leva. */
a.mini.wa{
  background:#25d366;border-color:#1eb455;color:#fff;font-weight:600;
}
a.mini.wa:hover{background:#1eb455;border-color:#189245;color:#fff}
.mini.bloqueada{
  background:#f1f2f0;border:1px solid var(--linha);color:var(--tinta-suave);
  padding:.3rem .55rem;border-radius:6px;font-size:.78rem;cursor:default;
}