/**
 * Franja inferior degradada en cards (PWA + panel).
 * Uso: añade `sp-card-accent` + una clase `sp-accent-*` en el mismo elemento.
 */

.card.sp-card-accent,
.app-stat.sp-card-accent,
.card.auth-card.sp-card-accent {
    position: relative;
    overflow: hidden;
}

.card.sp-card-accent::after,
.app-stat.sp-card-accent::after,
.card.auth-card.sp-card-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--sp-accent-bar, linear-gradient(90deg, #38bdf8, #6366f1));
    border-radius: 0 0 var(--bs-card-border-radius, var(--bs-border-radius-lg, 0.5rem))
        var(--bs-card-border-radius, var(--bs-border-radius-lg, 0.5rem));
    pointer-events: none;
    z-index: 3;
}

.app-stat.sp-card-accent::after {
    border-radius: 0 0 0.75rem 0.75rem;
}

.card.auth-card.sp-card-accent::after {
    border-radius: 0 0 0.85rem 0.85rem;
}

/* Degradados (90deg, tonos vivos tipo dashboard moderno) */
.sp-accent-cyan {
    --sp-accent-bar: linear-gradient(90deg, #22d3ee 0%, #2563eb 100%);
}

.sp-accent-sky {
    --sp-accent-bar: linear-gradient(90deg, #38bdf8 0%, #4f46e5 100%);
}

.sp-accent-teal {
    --sp-accent-bar: linear-gradient(90deg, #2dd4bf 0%, #0d9488 100%);
}

.sp-accent-emerald {
    --sp-accent-bar: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.sp-accent-lime {
    --sp-accent-bar: linear-gradient(90deg, #a3e635 0%, #16a34a 100%);
}

.sp-accent-amber {
    --sp-accent-bar: linear-gradient(90deg, #fcd34d 0%, #ea580c 100%);
}

.sp-accent-orange {
    --sp-accent-bar: linear-gradient(90deg, #fb923c 0%, #dc2626 100%);
}

.sp-accent-rose {
    --sp-accent-bar: linear-gradient(90deg, #fb7185 0%, #db2777 100%);
}

.sp-accent-fuchsia {
    --sp-accent-bar: linear-gradient(90deg, #e879f9 0%, #a21caf 100%);
}

.sp-accent-violet {
    --sp-accent-bar: linear-gradient(90deg, #a78bfa 0%, #6d28d9 100%);
}

.sp-accent-indigo {
    --sp-accent-bar: linear-gradient(90deg, #818cf8 0%, #4338ca 100%);
}

.sp-accent-slate {
    --sp-accent-bar: linear-gradient(90deg, #94a3b8 0%, #475569 100%);
}