.text-primary-app {
    color: var(--primary-app) !important;
}

.bg-primary-app-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--primary-app-rgb), 0.5) !important;
}

.bg-primary-app {
    background-color: var(--primary-app) !important;
}

.border-primary-app {
    border-color: var(--primary-app) !important;
}

.bg-gradient-to-r {
    background-color: var(--primary-app) !important;
}

.border-primary-app {
    border-color: var(--primary-app) !important;
}

.hover\:bg-primary-app:hover {
    background-color: var(--primary-app) !important;
}

.hover\:text-primary-app:hover {
    color: var(--primary-app) !important;
}

/* === FONDO CON GRADIENTE PERSONALIZADO === */

.custom-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right,
            rgba(var(--primary-app-rgb), 0.4),
            /* Color primario con 40% opacidad */
            rgba(0, 0, 0, 1),
            /* Negro */
            rgba(var(--primary-app-rgb), 0.2)
            /* Color primario con 20% opacidad */
        );
}

.blur-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    filter: blur(80px);
}

.blur-circle-top {
    top: 0;
    right: 0;
    background-color: rgba(var(--primary-app-rgb), 0.2);
}

.blur-circle-bottom {
    bottom: 0;
    left: 0;
    background-color: rgba(var(--primary-app-rgb), 0.15);
}