/* patrulha.css — a tela /patrulha. Só tokens do tema, como avaliacao.css:
   nenhuma cor literal, para o Fichário e o Âmbar continuarem valendo. */

.patrulha-explica {
  max-width: 68ch;
  color: var(--ink-dim);
  margin-bottom: var(--space-3, 1rem);
}

.patrulha-resumo {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-2, .75rem);
  margin: var(--space-3, 1rem) 0;
}

.patrulha-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, .75rem);
  margin-bottom: var(--space-3, 1rem);
}

/* 44px de alvo, como o resto do site no celular. */
.patrulha-barra .btn-secundario { min-height: 44px; }

.patrulha-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 1rem);
}

.patrulha-item {
  border: 1px solid var(--line);
  border-radius: var(--radius, 4px);
  padding: var(--space-3, 1rem);
  background: var(--surface);
}

.patrulha-item.nova { border-color: var(--accent); }

.patrulha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, .75rem);
}

.patrulha-pagina {
  font-weight: 600;
  color: var(--ink);
}

.patrulha-selo {
  font-family: var(--font-mono, monospace);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 .35em;
  color: var(--ink-dim);
}

.patrulha-selo.nova,
.patrulha-selo.desde {
  border-color: var(--accent);
  color: var(--accent);
}

.patrulha-meta {
  font-size: .8125rem;
  color: var(--ink-dim);
  margin-top: .35rem;
}

.patrulha-saldo.menos { color: var(--erro, var(--accent)); }

/* «Olhar primeiro» é ordem de leitura, não acusação: fica legível e discreto,
   sem a gramática visual de alerta que a moderação usa. */
.patrulha-olhar {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--ink);
  border-left: 2px solid var(--line);
  padding-left: .6rem;
}

.patrulha-resumos {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  font-size: .875rem;
  color: var(--ink-dim);
}

.patrulha-erro,
.patrulha-vazio {
  color: var(--ink-dim);
  font-style: italic;
}

@media (max-width: 480px) {
  .patrulha-item { padding: var(--space-2, .75rem); }
  .patrulha-topo { gap: .4rem; }
}