:root {

    /*
    |--------------------------------------------------------------------------
    | SUMATBAM THEME
    |--------------------------------------------------------------------------
    | Usa colores dinámicos de Vuexy / Bootstrap
    | Si cambias el primary color desde Template Customizer,
    | TODO cambiará automáticamente.
    |--------------------------------------------------------------------------
    */

    --sumatbam-primary: var(--bs-primary);
    --sumatbam-primary-rgb: var(--bs-primary-rgb);

    --sumatbam-text: var(--bs-heading-color);
    --sumatbam-muted: var(--bs-secondary-color);

    --sumatbam-card-bg: var(--bs-body-bg);
    --sumatbam-white: #fff;
}

/*
|--------------------------------------------------------------------------
| CARD PRINCIPAL
|--------------------------------------------------------------------------
*/

.sumatbam-card {
    background: var(--sumatbam-card-bg);
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

/*
|--------------------------------------------------------------------------
| BADGE
|--------------------------------------------------------------------------
*/

.sumatbam-badge {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(var(--sumatbam-primary-rgb), .12);
    color: var(--sumatbam-primary);
    font-weight: 600;
    font-size: .85rem;
}

/*
|--------------------------------------------------------------------------
| BOTONES
|--------------------------------------------------------------------------
*/

.btn-sumatbam {
    background: var(--sumatbam-primary);
    color: #fff;
    border-radius: 14px;
    padding: .85rem 1.5rem;
    font-weight: 700;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: .25s ease;
}

.btn-sumatbam:hover {
    color: #fff;
    transform: translateY(-2px);
    opacity: .92;
}

/*
|--------------------------------------------------------------------------
| CAJAS
|--------------------------------------------------------------------------
*/

.sumatbam-info-box {
    border-radius: 18px;
    padding: 1rem;
    background: rgba(var(--sumatbam-primary-rgb), .06);
    border-left: 4px solid var(--sumatbam-primary);
}

.sumatbam-info-box h6 {
    margin: 0;
    font-weight: 700;
    color: var(--sumatbam-text);
}

.sumatbam-info-box small {
    color: var(--sumatbam-muted);
}

/*
|--------------------------------------------------------------------------
| FONDO GRADIENTE
|--------------------------------------------------------------------------
*/

.sumatbam-bg-gradient {
    background:
        linear-gradient(
            135deg,
            var(--sumatbam-primary),
            color-mix(in srgb, var(--sumatbam-primary) 75%, #000)
        );
}

/*
|--------------------------------------------------------------------------
| ICONOS
|--------------------------------------------------------------------------
*/

.sumatbam-module-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/*
|--------------------------------------------------------------------------
| TITULOS
|--------------------------------------------------------------------------
*/

.sumatbam-title-primary {
    color: var(--sumatbam-primary);
}

.sumatbam-text-muted {
    color: var(--sumatbam-muted);
}