/*
 * ===================================================================
 * VERSIÓN FINAL CORREGIDA - BOTÓN DE INSPIRACIÓN
 * ===================================================================
 */

/* --- 1. Estilo base: Define el TAMAÑO y la ANIMACIÓN --- */
.app .menu a.btn-inspiration {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border-radius: 6px;
    margin: 5px; /* margen lateral*/
    padding: 15px; /* grosor*/
    z-index: 1;
    /* Propiedades clave que deben persistir */
    background-size: 200% auto !important;
    animation: gradient-flow 3s ease infinite, pulse-glow 1.5s ease-out infinite !important;

    will-change: filter, transform;
}

    .app .menu a.btn-inspiration:hover {
        color: #ffffff;
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        animation-play-state: paused, running;
    }

    .app .menu a.btn-inspiration > * {
        position: relative;
        z-index: 2;
    }


/* --- 2. Gradientes para cada tema: Define SÓLO la IMAGEN --- */

/* Default y Tema Teal */
.app .menu a.btn-inspiration {
    /* Usamos background-image para no resetear el size */
    background-image: linear-gradient(45deg, #00acac, #008a8a, #00acac);
}

body.theme-red .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #ff5b57, #d92521, #ff5b57);
}

body.theme-pink .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #ff89b5, #f53c86, #ff89b5);
}

body.theme-orange .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #f59c1a, #c47605, #f59c1a);
}

body.theme-yellow .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #fcc419, #d9a400, #fcc419);
}

body.theme-lime .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #a0d521, #7baf01, #a0d521);
}

body.theme-green .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #00b65a, #008c45, #00b65a);
}

body.theme-cyan .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #348fe2, #1a71c2, #348fe2);
}

body.theme-blue .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #49b6d6, #1399bd, #49b6d6);
}

body.theme-purple .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #727cb6, #4b5490, #727cb6);
}

body.theme-indigo .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #6b56c4, #44329a, #6b56c4);
}

body.theme-gray-600 .app .menu a.btn-inspiration {
    background-image: linear-gradient(45deg, #585f65, #363b3f, #585f65);
}


/* --- 3. NUEVO Ajuste para el modo oscuro --- */
[data-bs-theme="dark"] .app .menu a.btn-inspiration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15); /* Capa de brillo blanco semitransparente */
    border-radius: 6px;
    z-index: 1;
}


/* --- 4. Estilos para el modo minimizado (sin cambios) --- */
.app-sidebar-minified .btn-inspiration .btn-inspiration-text {
    display: none;
}

.app-sidebar-minified .btn-inspiration .fa-lightbulb {
    margin-right: 0 !important;
}


/* --- 5. Keyframes para la animación (sin cambios) --- */
@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Keyframes para la animación del pulso de resplandor */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.3);
    }

    70% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 15px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0);
    }
}