/* =====================================================================
   lista.css — página de Atividades: cabeçalho, cartões e modais

   Requisitos: docs/specs/Atividades/calendario-de-atividades.md
   Implementação: docs/specs/Atividades/fase1-implementacao.md, §10

   As classes `filtros-*`, `gestao-*`, `op-menu*`, `modal-*` e `btn*` vêm dos
   ficheiros já existentes: aqui só está o que é próprio das atividades.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Invólucro e estado vazio da página (R2 de
   docs/specs/core/classes-css-nao-carregadas.md)

   Chamavam-se `.lista-wrapper` e `.lista-vazia`, por empréstimo do
   `lista_elementos.css` -- que nunca chegou a ser carregado aqui, e por isso a
   página ficava sem invólucro nenhum. Não há um `.lista-wrapper` genérico no
   projeto: cada página de lista nomeia e define o seu (`.especialidades-wrapper`,
   `.objetivos-wrapper`, ...). Este é o das Atividades.
   --------------------------------------------------------------------- */
.atividades-wrapper {
  max-width: 1040px;
  margin: 0 auto 2rem;
  padding: 0 0 2rem;
  font-family: var(--font-body);
  color: var(--color-text);
}

.atividades-vazio {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  color: var(--color-text-soft);
  font-size: .95rem;
}

/* ---------------------------------------------------------------------
   Cabeçalho e seletor de vista (FR03.3)
   --------------------------------------------------------------------- */
.atividades-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.atividades-titulo {
  font-family: var(--font-title);
  font-size: 1.6rem;
  margin: 0;
}

/* R12 — o seletor de vista e a ação principal, à direita do título. */
.atividades-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.vista-seletor {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface);
}

.vista-seletor__opcao {
  padding: var(--space-2) var(--space-4);
  font-size: .9rem;
  color: var(--color-text-soft);
  text-decoration: none;   /* a opção inativa é um <a> */
}

a.vista-seletor__opcao:hover {
  background: var(--color-categoria-caminheiro-light);
  color: var(--color-categoria-caminheiro-dark);
}

/* R21 — fundo claro e não cheio. O violeta cheio fica **só** para o
   `.btn--primario`, que é a ação da página: um seletor diz onde se está e não
   deve gritar mais alto do que a coisa que se faz. Ao lado do "Nova atividade"
   os dois eram o mesmo violeta e confundiam-se. */
.vista-seletor__opcao--ativa {
  background: var(--color-categoria-caminheiro-light);
  color: var(--color-categoria-caminheiro-dark);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Cores dos participantes (FR01.2)

   Nomeadas pelo **papel** e não pela cor: trocar o vermelho do Agrupamento é
   trocar dois valores aqui, e não procurar "vermelho" em três ficheiros. Já
   valeu a pena uma vez — o Agrupamento e a Comunidade trocaram de cor durante
   a implementação.

   O Clã usa agora o vermelho da marca (`--color-categoria-caminheiro`,
   H24/#E0494A — docs/specs/Atividades/cores-participantes-cla-vermelho.md): é
   a identidade central da aplicação, e não fazia sentido ficar a azul. O
   Agrupamento, que tinha esse vermelho antes, troca com o Clã e passa ao azul
   que era da Comunidade — a segunda troca entre os dois, pela mesma razão da
   primeira: mantê-los bem distintos à vista, um quente e um frio, sem
   inventar uma terceira cor só para isto.
   --------------------------------------------------------------------- */
:root {
  --participantes-agrupamento-bg: oklch(92% 0.05 240);
  --participantes-agrupamento-ink: oklch(40% 0.13 240);

  --participantes-comunidade-bg: var(--color-categoria-caminheiro-light);
  --participantes-comunidade-ink: var(--color-categoria-caminheiro-dark);

  --participantes-tribo-bg: var(--color-accent-amber-light);
  --participantes-tribo-ink: var(--color-accent-amber-ink);

  --participantes-conselho-bg: var(--color-primary-light);
  --participantes-conselho-ink: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Cartão da atividade (FR04.1)
   --------------------------------------------------------------------- */
.atividades-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.atividade-cartao {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  /* A cor dos participantes entra por uma barra à esquerda e não por fundo
     inteiro: um cartão com fundo saturado torna o texto mais difícil de ler e
     compete com as pílulas de estado que o Albergue já usa. */
  border-left: 6px solid var(--participantes-cor, var(--color-border));
}

.atividade-cartao--agrupamento { --participantes-cor: var(--participantes-agrupamento-ink); background: var(--participantes-agrupamento-bg); }
.atividade-cartao--comunidade  { --participantes-cor: var(--participantes-comunidade-ink);  background: var(--participantes-comunidade-bg); }
.atividade-cartao--tribo      { --participantes-cor: var(--participantes-tribo-ink);      background: var(--participantes-tribo-bg); }
.atividade-cartao--conselho    { --participantes-cor: var(--participantes-conselho-ink);    background: var(--participantes-conselho-bg); }

/* FR04.3 — uma atividade arquivada não se confunde com uma corrente. */
.atividade-cartao--arquivada {
  opacity: .72;
  border-style: dashed;
}

/* D25 — só o ícone, sem o nome do tipo em texto ao lado (que passou para o
   `aria-label` do próprio ícone): não há razão para reservar a largura de
   "ACANTONAMENTO" a um cartão que só mostra um emoji. */
.atividade-cartao__tipo {
  display: flex;
  align-items: flex-start;
}

.atividade-cartao__icone { font-size: 1.6rem; line-height: 1; }

.atividade-cartao__corpo { flex: 1; min-width: 0; }

.atividade-cartao__nome {
  font-family: var(--font-title);
  font-size: 1.05rem;
  margin: 0 0 var(--space-1);
  /* O nome pode ser longo; corta-se com reticências em vez de empurrar o menu
     de ações para fora do cartão. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atividade-cartao__quando {
  margin: 0 0 var(--space-2);
  font-size: .9rem;
  color: var(--color-text-soft);
}

.atividade-cartao__hora { color: var(--color-text-faint); }

.atividade-cartao__participantes { margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* US3.5 — "X de Y" presentes; não é um estado, por isso sem tokens de cor. */
.atividade-cartao__presencas {
  margin: var(--space-1) 0 0;
  font-size: .85rem;
  color: var(--color-text-faint);
}

.pilula-participantes,
.pilula-arquivada,
.pilula-informacao {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
}

.pilula-participantes--agrupamento { background: var(--participantes-agrupamento-ink); color: #fff; }
.pilula-participantes--comunidade  { background: var(--participantes-comunidade-ink);  color: #fff; }
.pilula-participantes--tribo      { background: var(--participantes-tribo-ink);      color: #fff; }
.pilula-participantes--conselho    { background: var(--participantes-conselho-ink);    color: #fff; }

.pilula-arquivada {
  background: var(--state-nao-iniciado-bg);
  color: var(--state-nao-iniciado-ink);
}

.pilula-informacao {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* US2.2/US2.3 — lista de elegíveis do modal de registo de presenças, com o
   indicador de cada elemento clicável desde a US2.3 (`atividade_modais.js`
   trata o ciclo; aqui é só a apresentação por estado). */
.lista-presencas {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.presenca-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.presenca-item__nome { font-weight: 600; font-size: .9rem; }

.presenca-item__estado {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 600;
  background: var(--state-nao-iniciado-bg);
  color: var(--state-nao-iniciado-ink);
}

/* US2.6 R4 — só o indicador editável tem cursor de clique; encerrado é
   só de leitura. */
.presenca-item__estado--editavel { cursor: pointer; }

.modal-presencas-encerrado { font-weight: 600; margin: var(--space-3) 0; }

.presenca-item__estado--vazio,
.presenca-item__estado--vai_participar {
  background: var(--state-nao-iniciado-bg);
  color: var(--state-nao-iniciado-ink);
}

.presenca-item__estado--parcial {
  background: var(--state-parcial-bg);
  color: var(--state-parcial-ink);
}

.presenca-item__estado--presente {
  background: var(--state-presente-bg);
  color: var(--state-presente-ink);
}

.presenca-item__estado--ausente {
  background: var(--state-ausente-bg);
  color: var(--state-ausente-ink);
}

/* R4 — o mesmo indicador de foco que o resto do portal já usa, para o
   controlo cíclico não ficar invisível a navegar por teclado. */
.presenca-item__estado:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* R22 — o `color` repetido **não** é redundante. O `albergue-tokens.css` tem um
   `a:hover { color: var(--color-primary-dark) }`, e um seletor de elemento com
   pseudo-classe (0,1,1) vence uma classe (0,1,0): sem esta linha, a letra
   branca passava a violeta escuro sobre fundo violeta escuro.

   O `:focus-visible` acompanha porque quem navega por teclado tem direito ao
   mesmo contraste de quem usa o rato. */
.pilula-informacao:hover,
.pilula-informacao:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

.atividade-cartao__acoes { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Formulário dos modais
   --------------------------------------------------------------------- */
/* O padrão `.campo` (etiqueta, campo, foco, rádios, ajuda e erro) vive agora em
   css/campos.css, carregada por base.html. Aqui fica só o que é das
   Atividades. */
.campo-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Os dias da semana (R4/R5/R15 da especificação de recorrência) usam o layout
   de grupo de checkbox do padrão `.campo-radio`: rótulo e controlo lado a
   lado, um por linha. */
#campo-dias-semana label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 0;
}

/* O `<ul>` que o `CheckboxSelectMultiple` do Django desenha para os dias da
   semana — sem marcadores, sem indentação, um por linha como o resto. */
#campo-dias-semana ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.campo-so-leitura {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0 0 var(--space-4);
  font-size: .9rem;
}

.campo-so-leitura__label { font-weight: 600; color: var(--color-text-soft); }

/* ---------------------------------------------------------------------
   Modal de eliminação (FR12.2)
   --------------------------------------------------------------------- */
.sumario-apagar {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
  margin-bottom: var(--space-4);
}

.sumario-apagar p { margin: 0 0 var(--space-1); font-size: .9rem; }
.sumario-apagar p:first-child { font-weight: 700; font-size: 1rem; }

.aviso-perigo {
  font-size: .88rem;
  color: var(--color-danger-dark);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------
   Modal de atividade

   O **rodapé não está aqui**, e é deliberado. A disposição dos botões
   (FR09.2) vem do `oportunidade_modais.css` — `.modal-rodape` com
   `justify-content: flex-end` — mais o `margin-right: auto` que o
   `shell.css` dá ao `.btn--cancelar` e ao `.btn--voltar`. É isso que atira o
   Cancelar para a esquerda e deixa as ações à direita.

   Houve aqui um `.modal-rodape` próprio, com `space-between` e um
   `.modal-rodape__acoes`. Não fazia falta e nem sequer valia: esta folha
   carrega **antes** do `oportunidade_modais.css`, pelo que a redefinição
   perdia — e o resultado era os dois botões colados à direita. Foi removido,
   não corrigido.
   --------------------------------------------------------------------- */
.modal-atividade__icone { font-size: 2rem; line-height: 1; }

.modal-atividade__autoria {
  margin-top: var(--space-4);
  font-size: .82rem;
  color: var(--color-text-faint);
}

.modal-atividade__informacao { margin: var(--space-3) 0; }

/* ---------------------------------------------------------------------
   Paginação — o botão de carregar mais (FR04.5)

   Chama-se `.btn-carregar-mais` e **não** `.btn-ver-mais`, que seria o nome
   óbvio. A razão é um problema que esta correção encontrou e não resolve: no
   projeto, `.btn-ver-mais` nomeia **duas** coisas diferentes — este botão de
   paginação (cheio, largo) e o "ver mais…" do menu de ações do cartão (pílula
   de contorno, pequena) —, e está definido em quatro folhas de estilo, três
   delas com regras idênticas.

   Esta página é a primeira a precisar dos **dois** ao mesmo tempo: tem menu de
   ações nos cartões e tem paginação. Com um nome só, um sobrepunha-se ao outro.
   Dar-lhe aqui um nome próprio evita a colisão sem mexer nas outras seis
   páginas que usam a classe — essa arrumação é trabalho seu.
   --------------------------------------------------------------------- */
.ver-mais-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.btn-carregar-mais {
  padding: .6rem 1.6rem;
  background: var(--color-acao);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transicao);
}
.btn-carregar-mais:hover { background: var(--color-acao-dark); }
.btn-carregar-mais:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .atividade-cartao {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .campo-linha { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Cartão "Próximas atividades" na página inicial (FR15)

   Vive aqui e não no `home.css` porque é do domínio das atividades: as cores
   dos participantes são as mesmas dos cartões da lista, e é isso que faz a
   página inicial e a página de Atividades lerem-se como a mesma coisa.
   --------------------------------------------------------------------- */
.proximas-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-5);
}

/* Título e vazio do cartão — classes próprias, e não as `.cla-card__*` do «hero»
   do Animador: aquelas têm texto branco (fundo encarnado) e aqui a superfície é
   clara. Ver docs/specs/core/acerto-verde-residual-e-correcoes-visuais.md, ponto 11. */
.proximas-card__titulo {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--color-text);
}
.proximas-card__vazio {
  margin: var(--space-3) 0 0;
  font-size: .9rem;
  color: var(--color-text-soft);
}

.proximas-lista {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.proximas-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 4px solid var(--participantes-cor, var(--color-border));
}

.proximas-item--agrupamento { --participantes-cor: var(--participantes-agrupamento-ink); background: var(--participantes-agrupamento-bg); }
.proximas-item--comunidade  { --participantes-cor: var(--participantes-comunidade-ink);  background: var(--participantes-comunidade-bg); }
.proximas-item--tribo      { --participantes-cor: var(--participantes-tribo-ink);      background: var(--participantes-tribo-bg); }
.proximas-item--conselho    { --participantes-cor: var(--participantes-conselho-ink);    background: var(--participantes-conselho-bg); }

.proximas-item__icone { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

.proximas-item__texto { min-width: 0; }

.proximas-item__nome {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proximas-item__meta {
  display: block;
  font-size: .8rem;
  color: var(--color-text-soft);
}

.proximas-ligacao {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.proximas-ligacao:hover { text-decoration: underline; }