@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: $radius-xl;
    padding: $space-5;
}

.card__title {
    font-weight: 500;
    color: var(--color-text-primary);
}

.card__subtitle {
    margin-top: $space-1;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

// Tarjetas-link del dashboard: hover con leve elevación.
.card--interactive {
    display: block;
    transition:
        transform $transition-fast,
        border-color $transition-fast,
        box-shadow $transition-fast;

    &:hover {
        transform: translateY(-2px);
        border-color: var(--color-accent-strong);
        box-shadow: var(--shadow-elevated);
    }
}