/* ==========================================================
   GRID DE CARDS
========================================================== */

.cards-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

    margin-bottom: 24px;
}

/* ==========================================================
   CARD DSGOV (br-card)
   Regra base do Design System gov.br. As variáveis customizadas
   usadas aqui são as mesmas definidas no DSGov empacotado em
   lme/static/vendor/dsgov/core.css:
     --spacing-scale-2x ... 16px
     --surface-shadow-sm .. 0 1px 6px rgba(0, 0, 0, .16)
     --background ......... var(--background-light)  (#fff)
     --color .............. var(--color-light)       (#333)
   ========================================================== */

.br-card {
  --card-padding: var(--spacing-scale-2x);
  --card-height-fixed: 250px;
  background: var(--background);
  box-shadow: var(--surface-shadow-sm);
  color: var(--color);
  margin-bottom: var(--spacing-scale-2x);
}

/* ==========================================================
   CARD (legado)
========================================================== */

.card {

    background: var(--card-bg);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: 20px;

    transition: all .2s ease;
}

.card:hover {

    background: var(--card-bg-hover);

    transform: translateY(-2px);
}

/* ==========================================================
   TÍTULO
========================================================== */

.card-title {

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    color: var(--text-faint);

    margin-bottom: 12px;

    letter-spacing: 0.6px;
}

/* ==========================================================
   VALOR
========================================================== */

.card-value {

    font-size: 28px;

    font-weight: 700;

    color: var(--title, var(--text));

    line-height: 1.2;
}

/* ==========================================================
   CORES
========================================================== */

.card-positive .card-value {

    color: var(--success);
}

.card-negative .card-value {

    color: var(--danger);
}

.card-neutral .card-value {

    color: var(--primary);
}

/* ==========================================================
   RODAPÉ
========================================================== */

.card-footer {

    margin-top: 10px;

    font-size: 12px;

    color: var(--text-faint);
}