/* Clase para fondo negro */
.bg-black {
    background-color: black!important;
}

/* Clase para fondo dorado */
.bg-gold {
    background-color: #DCA61C!important;
}

/* Clase para fondo burdeos */
.bg-burgundy {
    background-color: #900020!important;
}

.btn-burgundy {
    background-color: #900020!important;
    color: white!important;
    transition: background-color 0.3s ease!important;
    border-radius: 4px;
}

.btn-burgundy:hover {
    background-color: #720019!important;
}

/* Clase para fondo crema */
.bg-cream {
    background-color: #FFE8AD!important;
}

.bg-cream-light {
    background-color: #FFF0C9!important;
}

.input-cream {
    width: 100%;
    padding: 4px 8px 4px 8px;
    background-color: #FFE8AD;
    box-sizing: border-box;
    border: 1px solid #DCA61C;
    border-radius: 4px;
}

.btn-brown {
    background-color: #D4A67C!important;
    color: black!important;
    transition: background-color 0.3s ease!important;
    border-radius: 4px;
}

.btn-brown:hover {
    background-color: #e6bb93!important;
}

/* Clase para texto negro */
.text-black {
    color: black!important;
}

/* Clase para texto dorado */
.text-gold {
    color: #DCA61C!important;
}

/* Clase para texto burdeos */
.text-burgundy {
    color: #900020!important;
}

/* Clase para texto crema */
.text-cream {
    color: #fff0c9!important;
}



/* Clase para borde negro */
.border-black {
    border-color: black!important;
}

/* Tooltip container */
.mensaje {
    position: relative;
    display: inline-block;
    color: blue;
  }
  
  /* Tooltip text */
  .mensaje .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.877);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text */
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -75px;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .mensaje:hover .tooltiptext {
    visibility: visible;
  }

  .mensaje .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }