/*
 * CARD
 * Superfície que agrupa conteúdo como uma unidade. Usado com PARCIMÔNIA:
 * a separação primária no app é espaço em branco + divisores. Card só
 * quando algo precisa destacar como unidade (formulários, telas de auth).
 * Borda sutil por padrão.
 */

.card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Variante para tabela: sem padding (a tabela traz o próprio espaçamento).
   Em telas estreitas a própria tabela rola na horizontal. */
.card--table {
  padding: 0;
}

@media (max-width: 760px) {
  .card--table {
    overflow-x: auto;
  }
}

/* Cabeçalho opcional: título + ação, com divisor abaixo. */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* Rodapé opcional: ações, com divisor acima. */
.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* Em telas pequenas, padding um pouco menor. */
@media (max-width: 640px) {
  .card {
    padding: var(--space-4);
  }
}