/* Colores personalizados */
:root {
    --bs-teal: #20c997;
    --bs-cyan: #00cfe8;
    --bs-orange: #fd7e14;
    --bs-brown: #6d4c41;
    --bs-blue: #007bff;
    --bs-pink: #e83e8c;
}

/* Clases de Texto */
.text-teal {
    color: var(--bs-teal) !important;
}

.text-cyan {
    color: var(--bs-cyan) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-brown {
    color: var(--bs-brown) !important;
}

.text-blue {
    color: var(--bs-blue) !important;
}

.text-pink {
    color: var(--bs-pink) !important;
}

/********************************************/
/* Clases de Fondo */
.bg-teal {
    background-color: var(--bs-teal) !important;
}

.bg-cyan {
    background-color: var(--bs-cyan) !important;
}

.bg-orange {
    background-color: var(--bs-orange) !important;
}

.bg-brown {
    background-color: var(--bs-brown) !important;
}

.bg-blue {
    background-color: var(--bs-blue) !important;
}

.bg-pink {
    background-color: var(--bs-pink) !important;
}

/********************************************/
/* Clases de Borde */
.border-teal {
    border-color: var(--bs-teal) !important;
}

.border-cyan {
    border-color: var(--bs-cyan) !important;
}

.border-orange {
    border-color: var(--bs-orange) !important;
}

.border-brown {
    border-color: var(--bs-brown) !important;
}

.border-blue {
    border-color: var(--bs-blue) !important;
}

.border-pink {
    border-color: var(--bs-pink) !important;
}

/********************************************/
/* Clases de Sombra */
.shadow-teal {
    box-shadow: 0 0.5rem 1rem rgba(32, 201, 151, 0.15) !important;
}

.shadow-cyan {
    box-shadow: 0 0.5rem 1rem rgba(0, 207, 232, 0.15) !important;
}

.shadow-orange {
    box-shadow: 0 0.5rem 1rem rgba(253, 126, 20, 0.15) !important;
}

.shadow-brown {
    box-shadow: 0 0.5rem 1rem rgba(121, 85, 72, 0.15) !important;
}

.shadow-blue {
    box-shadow: 0 0.5rem 1rem rgba(0, 123, 255, 0.15) !important;
}

.shadow-pink {
    box-shadow: 0 0.5rem 1rem rgba(232, 62, 140, 0.15) !important;
}

/********************************************/
/* Clases de Opacidad */
.bg-teal-opacity {
    background-color: rgba(32, 201, 151, 0.5) !important;
}

.bg-cyan-opacity {
    background-color: rgba(0, 207, 232, 0.5) !important;
}

.bg-orange-opacity {
    background-color: rgba(253, 126, 20, 0.5) !important;
}

.bg-brown-opacity {
    background-color: rgba(121, 85, 72, 0.5) !important;
}

.bg-blue-opacity {
    background-color: rgba(0, 123, 255, 0.5) !important;
}

.bg-pink-opacity {
    background-color: rgba(232, 62, 140, 0.5) !important;
}

.border-teal-opacity {
    border-color: rgba(32, 201, 151, 0.5) !important;
}

.border-cyan-opacity {
    border-color: rgba(0, 207, 232, 0.5) !important;
}

.border-orange-opacity {
    border-color: rgba(253, 126, 20, 0.5) !important;
}

.border-brown-opacity {
    border-color: rgba(121, 85, 72, 0.5) !important;
}

.border-blue-opacity {
    border-color: rgba(0, 123, 255, 0.5) !important;
}

.border-pink-opacity {
    border-color: rgba(232, 62, 140, 0.5) !important;
}

/********************************************/
/* Clases de Gradiente */
.bg-gradient-teal {
    background-image: linear-gradient(
        180deg,
        var(--bs-teal),
        darken(var(--bs-teal), 10%)
    ) !important;
}

.bg-gradient-cyan {
    background-image: linear-gradient(
        180deg,
        var(--bs-cyan),
        darken(var(--bs-cyan), 10%)
    ) !important;
}

.bg-gradient-orange {
    background-image: linear-gradient(
        180deg,
        var(--bs-orange),
        darken(var(--bs-orange), 10%)
    ) !important;
}

.bg-gradient-brown {
    background-image: linear-gradient(
        180deg,
        var(--bs-brown),
        darken(var(--bs-brown), 10%)
    ) !important;
}

.bg-gradient-blue {
    background-image: linear-gradient(
        180deg,
        var(--bs-blue),
        darken(var(--bs-blue), 10%)
    ) !important;
}

.bg-gradient-pink {
    background-image: linear-gradient(
        180deg,
        var(--bs-pink),
        darken(var(--bs-pink), 10%)
    ) !important;
}

/********************************************/
/* Clases para Botones */
.btn-teal {
    background-color: var(--bs-teal) !important;
    border-color: var(--bs-teal) !important;
    color: #fff !important;
}

.btn-teal:hover {
    background-color: darken(var(--bs-teal), 10%) !important;
    border-color: darken(var(--bs-teal), 10%) !important;
}

.btn-cyan {
    background-color: var(--bs-cyan) !important;
    border-color: var(--bs-cyan) !important;
    color: #fff !important;
}

.btn-cyan:hover {
    background-color: darken(var(--bs-cyan), 10%) !important;
    border-color: darken(var(--bs-cyan), 10%) !important;
}

.btn-orange {
    background-color: var(--bs-orange) !important;
    border-color: var(--bs-orange) !important;
    color: #fff !important;
}

.btn-orange:hover {
    background-color: darken(var(--bs-orange), 10%) !important;
    border-color: darken(var(--bs-orange), 10%) !important;
}

.btn-brown {
    background-color: var(--bs-brown) !important;
    border-color: var(--bs-brown) !important;
    color: #fff !important;
}

.btn-brown:hover {
    background-color: darken(var(--bs-brown), 10%) !important;
    border-color: darken(var(--bs-brown), 10%) !important;
}

.btn-blue {
    background-color: var(--bs-blue) !important;
    border-color: var(--bs-blue) !important;
    color: #fff !important;
}

.btn-blue:hover {
    background-color: darken(var(--bs-blue), 10%) !important;
    border-color: darken(var(--bs-blue), 10%) !important;
}

.btn-pink {
    background-color: var(--bs-pink) !important;
    border-color: var(--bs-pink) !important;
    color: #fff !important;
}

.btn-pink:hover {
    background-color: darken(var(--bs-pink), 10%) !important;
    border-color: darken(var(--bs-pink), 10%) !important;
}

/********************************************/
/* Clases de Fondo para Etiquetas */
.bg-label-teal {
    background-color: var(--bs-teal) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}

.bg-label-cyan {
    background-color: var(--bs-cyan) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}

.bg-label-orange {
    background-color: var(--bs-orange) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}

.bg-label-brown {
    background-color: var(--bs-brown) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}

.bg-label-blue {
    background-color: var(--bs-blue) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}

.bg-label-pink {
    background-color: var(--bs-pink) !important;
    color: #fff !important; /* Asigna color de texto blanco para contraste */
    padding: 0.25rem 0.5rem; /* Agrega algo de padding para estilo de etiqueta */
    border-radius: 0.25rem; /* Esquinas redondeadas para darle un estilo de etiqueta */
    font-weight: 600; /* Texto en negrita para mayor visibilidad */
    display: inline-block; /* Asegura que se muestre como un bloque en línea */
}