/*=============================================
Backgrounds
=============================================*/
.bg-auxiliar, .bg-auxiliar>a {
    color: #fff !important;
}

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

.bg-auxiliar-subtle {
    background-color: var(--auxiliar-subtle)!important;
}

.bg-auxiliar-active {
    background-color: var(--auxiliar-active)!important;
}

.bg-auxiliar-hover {
    background-color: var(--auxiliar-hover)!important;
}

.bg-auxiliar-focus {
    background-color: var(--auxiliar-focus)!important;
}

.bg-auxiliar-subtle-focus {
    background-color: var(--auxiliar-subtle-focus)!important;
}

/*=============================================
callout
=============================================*/
.callout.callout-auxiliar {
    border-left-color: var(--auxiliar) !important;
}

/*=============================================
text
=============================================*/
.text-auxiliar {
    color: var(--auxiliar) !important;
}

/*=============================================
boton
=============================================*/
/* auxiliar */
.btn-auxiliar {
    color: #fff;
    background-color: var(--auxiliar) !important;
    border-color: var(--auxiliar) !important;
    box-shadow: none;
    transition: all 0.15s ease-in-out;
}
.btn-auxiliar:hover {
    background-color: var(--auxiliar-hover) !important;
    border-color: var(--auxiliar-hover) !important;
}
.btn-auxiliar:focus, .btn-auxiliar.focus {
    background-color: var(--auxiliar-focus) !important;
    border-color: var(--auxiliar-focus) !important;
    box-shadow: 0 0 0 0.2rem var(--auxiliar-subtle-focus) !important;
}
.btn-auxiliar:active, .btn-auxiliar.active {
    background-color: var(--auxiliar-active) !important;
    border-color: var(--auxiliar-active) !important;
}
.btn-auxiliar:disabled, .btn-auxiliar.disabled {
    background-color: var(--auxiliar-subtle) !important;
    border-color: var(--auxiliar-subtle) !important;
}

/*=============================================
Boton subtle
=============================================*/
.btn-auxiliar-subtle {
    color: var(--auxiliar) !important;
    border-color: var(--auxiliar) !important;
    background-color: var(--auxiliar-subtle) !important;
    transition: all 0.15s ease-in-out;
}
.btn-auxiliar-subtle:hover {
    border-color: var(--auxiliar) !important;
    background-color: var(--auxiliar) !important;
    color: #fff !important;
}
.btn-auxiliar-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--auxiliar-subtle-focus) !important;
}
.btn-auxiliar-subtle:active {
    background-color: var(--auxiliar-active) !important;
    border-color: var(--auxiliar-active) !important;
    color: #fff;
}

.btn-auxiliar-subtle.disabled, .btn-auxiliar-subtle:disabled {
    color: var(--auxiliar-subtle) !important;
    border-color: var(--auxiliar-subtle) !important;
}


/*=============================================
Boton outline
=============================================*/
.btn-outline-auxiliar {
    color: var(--auxiliar) !important;
    border-color: var(--auxiliar) !important;
    background-color: transparent;
    transition: all 0.15s ease-in-out;
}
.btn-outline-auxiliar:hover {
    border-color: var(--auxiliar) !important;
    background-color: var(--auxiliar) !important;
    color: #fff;
}
.btn-outline-auxiliar:focus {
    box-shadow: 0 0 0 0.2rem var(--auxiliar-subtle-focus) !important;
}
.btn-outline-auxiliar:active {
    background-color: var(--auxiliar-active) !important;
    border-color: var(--auxiliar-active) !important;
    color: #fff;
}

.btn-outline-auxiliar.disabled, .btn-outline-auxiliar:disabled {
    color: var(--auxiliar-subtle) !important;
    border-color: var(--auxiliar-subtle) !important;
}

/*=============================================
boton bg-gradient-*
=============================================*/
.bg-gradient-auxiliar {
    background: var(--auxiliar) linear-gradient(180deg, var(--auxiliar-soft), var(--auxiliar)) repeat-x !important;
    color: #fff;
}

/* Hover */
.bg-gradient-auxiliar.btn:hover {
    background: var(--auxiliar) linear-gradient(180deg, var(--auxiliar-hover), var(--auxiliar)) repeat-x !important;
    border-color: var(--auxiliar-hover) !important;
    color: #ececec;
}

/* Active */
.bg-gradient-auxiliar.btn.active,
.bg-gradient-auxiliar.btn:active,
.bg-gradient-auxiliar.btn:not(:disabled):not(.disabled).active,
.bg-gradient-auxiliar.btn:not(:disabled):not(.disabled):active {
    background: var(--auxiliar) linear-gradient(180deg, var(--auxiliar-active), var(--auxiliar)) repeat-x !important;
    border-color: var(--auxiliar-active) !important;
    color: #fff;
}

/* Focus */
.bg-gradient-auxiliar.btn:focus {
    box-shadow: 0 0 0 0.2rem var(--auxiliar-subtle-focus) !important;
    background: var(--auxiliar) linear-gradient(180deg, var(--auxiliar-focus), var(--auxiliar)) repeat-x !important;
    border-color: var(--auxiliar-focus) !important;
    color: #fff;
}

/*=============================================
tarjeta
=============================================*/
.card-auxiliar:not(.card-outline)>.card-header {
    background-color: var(--auxiliar) !important;
}

.card-auxiliar.card-outline {
    border-top: 3px solid var(--auxiliar) !important;
}

/*=============================================
Navbar
=============================================*/
.navbar-auxiliar {
    background-color: var(--auxiliar) !important;
    color: #fff;
}

/*=============================================
Sidebar
=============================================*/
.sidebar-dark-auxiliar .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-auxiliar .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--auxiliar) !important;
    color: #fff;
}


/*=============================================
Ribbon
=============================================*/
.ribbon-box .ribbon-auxiliar span {
  background: var(--auxiliar-hover);
  color: #fff;
}

.ribbon-box .ribbon-auxiliar span:before {
  border-right: 3px solid var(--auxiliar);
  border-top: 3px solid var(--auxiliar);
}

.ribbon-box .ribbon-auxiliar span:after {
  border-left: 3px solid var(--auxiliar);
  border-top: 3px solid var(--auxiliar);
}

/*=============================================
Acordion
=============================================*/
.accordion-button-auxiliar:not(.collapsed) {
  background-color: var(--auxiliar);
  color: #fff;
}

.accordion-body-auxiliar {
  background-color: var(--auxiliar);
  color: #fff;
}

.accordion-button-auxiliar-subtle:not(.collapsed) {
  background-color: var(--auxiliar-subtle);
  color: var(--auxiliar);
}

.accordion-body-auxiliar-subtle {
  background-color: var(--auxiliar-subtle);
  color: #fff;
}

.accordion-button-auxiliar-hover:not(.collapsed) {
  background-color: var(--secundario);
  color: #fff;
}

.accordion-body-auxiliar-hover {
  background-color: var(--auxiliar-hover);
  color: #fff;
}

.accordion-button-auxiliar-focus:not(.collapsed) {
  background-color: var(--secundario);
  color: #fff;
}

.accordion-body-auxiliar-focus {
  background-color: var(--auxiliar-hover);
  color: #fff;
}

.accordion-button-auxiliar-subtle-focus:not(.collapsed) {
  background-color: var(--secundario);
  color: #fff;
}

.accordion-body-auxiliar-subtle-focus {
  background-color: var(--auxiliar-hover);
  color: #fff;
}