/* Botones */
@layer components{
    .btn-jd{
        @apply px-4 py-2 rounded shadow focus:shadow-md focus:outline-none transition
    }

    .btn-jd-primary{
        @apply text-white bg-blue-500 hover:bg-blue-600 ring-blue-300 focus:ring
    }

    .btn-jd-secondary{
        @apply text-white bg-gray-500 hover:bg-gray-600 ring-gray-300 focus:ring
    }

    .btn-jd-succes{
        @apply text-white bg-green-500 hover:bg-green-600 ring-green-300 focus:ring
    }

    .btn-jd-warning{
        @apply text-white bg-yellow-500 hover:bg-yellow-600 ring-yellow-300 focus:ring
    }

    .btn-jd-danger{
        @apply text-white bg-red-500 hover:bg-red-600 ring-red-300 focus:ring
    }

    /* Outline */
    .outline-primary{
        @apply bg-white hover:bg-blue-500 hover:text-white border-2 border-blue-500 text-blue-500 ring-blue-300 focus:ring
    }

    .outline-secondary{
        @apply bg-white hover:bg-gray-500 hover:text-white border-2 border-gray-500 text-gray-500 ring-gray-300 focus:ring
    }

    .outline-succes{
        @apply bg-white hover:bg-green-500 hover:text-white border-2 border-green-500 text-green-500 ring-green-300 focus:ring
    }

    .outline-warning{
        @apply bg-white hover:bg-yellow-500 hover:text-white border-2 border-yellow-500 text-yellow-500 ring-yellow-300 focus:ring
    }

    .outline-danger{
        @apply bg-white hover:bg-red-500 hover:text-white border-2 border-red-500 text-red-500 ring-red-300 focus:ring
    }


    /* Degradado */
    .gradient-primary{
        @apply bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-700 hover:to-blue-500 ring-blue-300 focus:ring text-white
    }

    .gradient-secondary{
        @apply bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-700 hover:to-gray-500 ring-gray-300 focus:ring text-white
    }

    .gradient-succes{
        @apply bg-gradient-to-r from-green-500 to-green-700 hover:from-green-700 hover:to-green-500 ring-green-300 focus:ring text-white
    }

    .gradient-warning{
        @apply bg-gradient-to-r from-yellow-500 to-yellow-700 hover:from-yellow-700 hover:to-yellow-500 ring-yellow-300 focus:ring text-white
    }

    .gradient-danger{
        @apply bg-gradient-to-r from-red-500 to-red-700 hover:from-red-700 hover:to-red-500 ring-red-300 focus:ring text-white
    }

/* Add a glow to an element */
.glow-primary 
{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-align: center;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.2rem;
    border-radius: 8px;
    opacity: 1;
    /*Aplicandoelefectodebrillo*/box-shadow: 0 0 15px #667eea, 0 0 20px #764ba2, 0 0 25px #667eea, 0 0 30px #764ba2;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/* Increment the glow when its touched */
.glow-primary:hover 
{
    /* Aumentando el brillo al pasar el mouse */
    box-shadow: 0 0 20px #667eea, 0 0 25px #764ba2, 0 0 30px #667eea, 0 0 35px #764ba2;
}

}