/* Estilos próprios da lista de doações.
 *
 * O desenho vem da Tucano (static/tucano/): botões, campos, avisos, etiquetas,
 * tabelas e paginação são classes `tuc-*`. Aqui ficam só as peças que a
 * biblioteca não tem — faixa do topo, barra de progresso, a lista de itens e a
 * barra fixa de seleção —, todas escritas sobre os tokens `--tuc-*` para
 * acompanharem o tema claro/escuro sem duplicar cor.
 */

:root {
  /* Cor da casa. Trocar aqui repinta botões, links, campos e seleção. */
  --tuc-accent: #0f6b4f;
  --tuc-accent-hover: #0b5540;
  --tuc-accent-fg: #ffffff;
  --tuc-accent-text: #0b5540;

  --tuc-radius: 1rem;
  --tuc-text: 1rem;             /* 16px evita o zoom do iOS ao focar um campo */
  --tuc-control-height: 2.75rem; /* 44px: alvo de toque confortável */

  --faixa: #0f6b4f;
  --faixa-fg: #ffffff;
  --faixa-fraco: #ffffff29;
  --pagina: #f6f5f2;
  --cartao: #ffffff;
  --destaque-suave: #e7f3ee;
}

.dark,
[data-theme="dark"] {
  --tuc-accent: #34d399;
  --tuc-accent-hover: #6ee7b7;
  --tuc-accent-fg: #06281f;
  --tuc-accent-text: #6ee7b7;

  --faixa: #0c3a2c;
  --faixa-fg: #eafaf4;
  --faixa-fraco: #ffffff1f;
  --pagina: #0f0f0f;
  --cartao: #181818;
  --destaque-suave: #10342a;
}

@media (prefers-color-scheme: dark) {
  :root[data-tuc-theme="auto"] {
    --tuc-accent: #34d399;
    --tuc-accent-hover: #6ee7b7;
    --tuc-accent-fg: #06281f;
    --tuc-accent-text: #6ee7b7;

    --faixa: #0c3a2c;
    --faixa-fg: #eafaf4;
    --faixa-fraco: #ffffff1f;
    --pagina: #0f0f0f;
    --cartao: #181818;
    --destaque-suave: #10342a;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--pagina);
  color: var(--tuc-fg);
  font: 1rem/1.5 var(--tuc-font, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif);
  padding-bottom: env(safe-area-inset-bottom);
}

body.com-barra { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

h1 { font-size: 1.4rem; margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
p { margin: 0 0 .6rem; }
a { color: var(--tuc-accent-text); }

/* ------------------------------------------------------------------ topo */

.topo {
  background: var(--faixa);
  color: var(--faixa-fg);
  padding: 1.25rem 1rem 1rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top));
}

.topo h1 { color: var(--faixa-fg); }
.topo__evento { font-size: .9rem; opacity: .85; margin: -.25rem 0 0; }

/* Abas das seções do evento: ficam no conteúdo, logo abaixo do nome do evento,
   e não no menu de cima — que é só navegação geral. */
.secoes { margin-bottom: 1.25rem; }

.mensagem { font-size: .95rem; opacity: .92; }
.mensagem p:last-child { margin-bottom: 0; }

.menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0 -.5rem .75rem;
  flex-wrap: wrap;
}

.menu a,
.menu button {
  color: var(--faixa-fg);
  text-decoration: none;
  padding: .4rem .7rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.menu a.ativo { background: var(--faixa-fraco); font-weight: 600; }
.menu__sair { margin-left: auto; }
.menu__sair button { text-decoration: underline; opacity: .85; }

/* ------------------------------------------------------------- progresso */

.progresso { margin-top: 1rem; }

.progresso__barra {
  height: .625rem;
  border-radius: 999px;
  background: var(--faixa-fraco);
  overflow: hidden;
}

.progresso__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffd166;
  transition: width .3s var(--tuc-ease);
}

.progresso__texto { font-size: .85rem; margin: .45rem 0 0; }

/* Dentro de cartão a trilha é neutra: verde sobre verde faz uma barra vazia
   parecer cheia, ainda mais nas barras finas por categoria. */
.cartao .progresso__barra { background: var(--tuc-border); }
.cartao .progresso__barra span { background: var(--tuc-accent); }
.cartao .progresso__texto { color: var(--tuc-muted); }

/* --------------------------------------------------------------- estrutura */

.conteudo { padding: 1rem; max-width: 40rem; margin: 0 auto; }

.conteudo--centro { min-height: 70vh; display: flex; align-items: center; }
.conteudo--centro > * { width: 100%; }

.cartao {
  background: var(--cartao);
  border: var(--tuc-border-width) solid var(--tuc-border);
  border-radius: var(--tuc-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.cartao--destaque { text-align: center; padding: 1.75rem 1.25rem; }
.cartao--destaque .lista-simples { text-align: left; }
.cartao--link { display: block; text-decoration: none; color: inherit; }
.cartao--link h2 { color: var(--tuc-accent-text); }
/* Texto em cima, ações numa linha só embaixo: numa coluna de 40rem a versão
   lado a lado espremia o texto e quebrava os botões em duas fileiras. */
.cartao--linha { display: flex; flex-direction: column; gap: .75rem; }
.cartao--doado { background: var(--tuc-elevated); }

.cartao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.cartao__topo h2 { margin-bottom: .5rem; }

/* O botão de ligar/desligar encosta à direita, longe dos atalhos de seção. */
.eventos__estado { margin-left: auto; }

.selo { font-size: 2.5rem; margin: 0 0 .5rem; line-height: 1; }
.meta { color: var(--tuc-muted); font-size: .85rem; }

.lista-simples { margin: .5rem 0 1rem; padding-left: 1.1rem; }
.lista-simples li { margin-bottom: .35rem; }

.campo { margin-bottom: .9rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.acoes--compactas { margin-top: 0; }
.avisos { margin-bottom: 1rem; }
.avisos .tuc-alert + .tuc-alert { margin-top: .5rem; }

.link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  word-break: break-all;
  background: var(--tuc-elevated);
  border: var(--tuc-border-width) solid var(--tuc-border);
  border-radius: var(--tuc-radius-md);
  padding: .6rem .7rem;
}

/* ------------------------------------------------------------- ferramentas */

.ferramentas {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pagina);
  padding: .875rem 0 1rem;
  margin-bottom: 1.25rem;
  /* Separa a barra do conteúdo que passa por baixo dela ao rolar. */
  border-bottom: var(--tuc-border-width) solid var(--tuc-border);
}

/* Dois seletores de propósito: `.tuc-choice.tuc-choice` zera a margem com
   especificidade 0,2,0 e venceria uma classe sozinha. */
.ferramentas .ferramentas__chave {
  margin-top: 1.25rem;
  padding: .25rem 0;
  font-size: .9rem;
  color: var(--tuc-muted);
}

.atalhos-caixa { position: relative; margin-top: 1rem; }

/* Degradês nas pontas: é o aviso de que a faixa corre para o lado.
   O JS liga/desliga cada um conforme a posição da rolagem. */
.atalhos-caixa::before,
.atalhos-caixa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--tuc-ease);
  z-index: 1;
}

.atalhos-caixa::before {
  left: 0;
  background: linear-gradient(to right, var(--pagina) 30%, transparent);
}

.atalhos-caixa::after {
  right: 0;
  background: linear-gradient(to left, var(--pagina) 30%, transparent);
}

.atalhos-caixa.tem-inicio::before,
.atalhos-caixa.tem-fim::after { opacity: 1; }

.atalhos {
  display: flex;
  gap: .5rem;
  /* Respiro no fim para o último chip não encostar na borda ao rolar. */
  padding-right: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.atalhos::-webkit-scrollbar { display: none; }

.atalhos .tuc-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tuc-accent-text);
  border-color: color-mix(in oklab, var(--tuc-accent) 40%, var(--tuc-border));
  background: color-mix(in oklab, var(--tuc-accent) 8%, var(--tuc-bg));
}

.vazio { color: var(--tuc-muted); text-align: center; padding: 1.5rem 0; }

/* ------------------------------------------------------------------ itens */

/* scroll-margin evita que a barra fixa de busca cubra o título ao usar os atalhos. */
.categoria { margin-bottom: 1.5rem; scroll-margin-top: 12rem; }

.categoria h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tuc-fg);
  /* Fio na cor da casa marcando onde cada categoria começa. */
  border-left: 3px solid var(--tuc-accent);
  padding-left: .6rem;
  margin-bottom: .7rem;
}

.categoria__contagem {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--tuc-muted);
}

.itens {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--cartao);
  border: var(--tuc-border-width) solid var(--tuc-border);
  border-radius: var(--tuc-radius);
  overflow: hidden;
}

.item + .item { border-top: var(--tuc-border-width) solid var(--tuc-border); }

.item__conteudo {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .85rem .9rem;
  min-height: 3.5rem;
}

/* Coluna: descrição e detalhe empilham mesmo sendo <span>, sem depender de
   `display` em cada filho. */
.item__texto { min-width: 0; display: flex; flex-direction: column; }

.item__descricao { margin: 0; font-weight: 500; }

/* Um degrau abaixo da descrição (1rem), não dois: a quantidade precisa ser lida. */
.item__meta {
  display: block;
  margin: .15rem 0 0;
  font-size: .875rem;
  color: var(--tuc-muted);
}
.item__meta--doado { color: var(--tuc-accent-text); }

.item:has(input:checked) { background: var(--destaque-suave); }

.item--doado { background: var(--tuc-elevated); }
.item--doado .item__descricao { color: var(--tuc-muted); text-decoration: line-through; }

/* ------------------------------------------------------------------ dados */

.dados {
  background: var(--cartao);
  border: var(--tuc-border-width) solid var(--tuc-border);
  border-radius: var(--tuc-radius);
  padding: 1rem;
  margin-top: 1.5rem;
}

.dados__ajuda { color: var(--tuc-muted); font-size: .85rem; }

/* ------------------------------------------------------------------ barra */

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--faixa);
  color: var(--faixa-fg);
  box-shadow: 0 -2px 12px #00000029;
  font-weight: 600;
}

.barra[hidden] { display: none; }

/* A barra fica sobre a faixa escura: o botão claro é o contraste certo ali. */
.barra .tuc-btn {
  background: var(--faixa-fg);
  border-color: var(--faixa-fg);
  color: var(--faixa);
}

/* ----------------------------------------------------------------- gestão */

.divisor {
  border: 0;
  border-top: var(--tuc-border-width) solid var(--tuc-border);
  margin: 1.1rem 0;
}

.subtitulo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tuc-muted);
  margin: 0 0 .75rem;
}

/* Andamento por categoria: nome, contagem e uma barra fina por linha. */
.categorias { list-style: none; margin: 0; padding: 0; }
.categorias__item + .categorias__item { margin-top: .9rem; }

.categorias__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: .3rem;
}

.categorias__linha:hover .categorias__nome { color: var(--tuc-accent-text); }
.categorias__nome { font-weight: 600; font-size: .9rem; }

.categorias__conta {
  font-size: .8rem;
  color: var(--tuc-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.categorias .progresso__barra { height: .375rem; }

/* O conteúdo tem 40rem no máximo, então os filtros se organizam pela largura
   do cartão e não pela da janela: busca em cima, os dois seletores lado a
   lado e os botões numa linha só. */
.filtros { display: grid; gap: .75rem; }

.filtros__acoes { display: flex; gap: .5rem; align-items: center; }
.filtros__novo { margin-left: auto; }
.resultado { margin: .9rem 0 0; }

/* Ajuda recolhida: o passo a passo não precisa ocupar a tela de quem já sabe
   importar. A seta e a animação são do acordeão da Tucano — aqui só o peso do
   título e o respiro do conteúdo. */
.ajuda > summary { font-weight: 600; }
.ajuda > summary + * { margin-top: .75rem; }

@media (min-width: 30rem) {
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtros__busca,
  .filtros__acoes { grid-column: 1 / -1; }
}

.paginacao { margin-bottom: 2rem; }

.tuc-table-wrap { margin-bottom: .5rem; }
.tabela--exemplo { font-size: .8rem; }

/* ---------------------------------------------------------------- desktop */

@media (min-width: 45rem) {
  .conteudo { padding: 1.5rem; }
  .topo { padding: 1.75rem 1.5rem 1.25rem; }
  .topo > * { max-width: 40rem; margin-inline: auto; }
  h1 { font-size: 1.7rem; }
  .barra { justify-content: center; gap: 1.5rem; }
}