/* Cards de indicadores: templates/components/kpi/_cards.html.twig */
.df-kpi {
    border: 1px solid rgba(var(--bs-secondary-rgb), .12);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
    font-variant-numeric: tabular-nums;
}

.df-kpi .card-body {
    padding: .75rem 1rem;
}

.df-kpi__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #74788d);
}

.df-kpi__value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Valor e texto de apoio na mesma linha; o texto desce sozinho quando falta espaço */
.df-kpi__main {
    column-gap: .5rem;
}

.df-kpi__icon {
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: var(--df-kpi-color);
    background: color-mix(in srgb, var(--df-kpi-color) 12%, transparent);
}

.df-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.df-kpi__delta--good { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.df-kpi__delta--bad { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger); }
.df-kpi__delta--neutral { background: rgba(var(--bs-secondary-rgb), .12); color: var(--bs-secondary-color, #74788d); }