/*
 * 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);
  /* Sombra flutuante em duas camadas: descola o card do fundo com ar premium,
     sem virar "caixa pesada". Combina com a borda fina. */
  box-shadow: var(--shadow-card);
}

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

/* Cabeçalho dentro de um card sem padding: recupera o respiro das bordas para
   alinhar o título/ação com o conteúdo recuado da tabela (não colar na borda).
   Zera a margem inferior da regra base — quem dá o respiro abaixo do divisor é
   o padding do thead da tabela; somar os dois afastaria demais a 1ª linha. */
.card--table .card__header {
  margin-bottom: 0;
  padding: var(--space-4) var(--space-5) var(--space-3);
}

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

/* Subtítulo/intro logo abaixo do card__header. O header já traz o divisor;
   este texto NÃO tem borda própria (evita o filete duplicado). */
.card__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Texto de apoio no RODAPÉ de um card, separado do conteúdo por um filete. */
.card__note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 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);
  }
}