/* =====================================================================
   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-primary-light);
  color: var(--color-primary-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-primary-light);
  color: var(--color-primary-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 vermelho do Agrupamento **não** é o `--color-danger` (FR01.2.1): esse é o
   vermelho da ação destrutiva, e um cartão pintado com ele leria-se como um
   cartão em erro. Este é mais quente e menos saturado, e distingue-se à vista.
   --------------------------------------------------------------------- */
:root {
  --participantes-agrupamento-bg: oklch(92% 0.05 30);
  --participantes-agrupamento-ink: oklch(40% 0.14 30);

  --participantes-comunidade-bg: oklch(92% 0.05 240);
  --participantes-comunidade-ink: oklch(40% 0.13 240);

  --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; }

.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;
}

/* 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
   --------------------------------------------------------------------- */
.campo { margin-bottom: var(--space-4); }

.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.campo-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.campo__ajuda {
  margin: var(--space-1) 0 0;
  font-size: .78rem;
  color: var(--color-text-faint);
}

.campo__erro {
  margin: var(--space-1) 0 0;
  font-size: .8rem;
  color: var(--color-danger);
}

.campo__erro:empty { display: none; }

.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-primary);
  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-primary-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);
}

.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; }