.pa-morado {
  background: rgba(149, 33, 178, 1);
}

.pa-morado-gradiente {
  background: linear-gradient(-45deg, rgba(149, 33, 178, .9) 0%, rgba(149, 33, 178, .5) 100%);
}

.pa-rojo {
  background: rgba(213, 0, 50, 1);
}

.pa-rojo-gradiente {
  background: linear-gradient(-45deg, rgba(213, 0, 50, 0) 50%, rgba(213, 0, 50, 1) 50%);
}

.pa-narajo {
  background: rgba(232, 119, 34, 1);
}

.pa-narajo-gradiente {
  background: linear-gradient(-45deg, rgba(232, 119, 34, 0) 50%, rgba(232, 119, 34, 1) 50%);
}

.pa-amarillo {
  background: rgba(196, 214, 0, 1);
}

.pa-amarillo-gradiente {
  background: linear-gradient(-45deg, rgba(196, 214, 0, 0) 50%, rgba(196, 214, 0, 1) 50%);
}

.pa-salmon {
  background: rgba(255, 88, 93, 1);
}

.pa-salmon-gradiente {
  background: linear-gradient(-45deg, rgba(255, 88, 93, 0) 50%, rgba(255, 88, 93, 1) 50%);
}

.pa-azul {
  background: rgba(48, 127, 226, 1);
}

.pa-azul-gradiente {
  background: linear-gradient(-45deg, rgba(48, 127, 226, 0) 50%, rgba(48, 127, 226, 1) 50%);
}

.pa-verde {
  background: rgba(67, 176, 42, 1);

}

.pa-verde-gradiente {
  background: linear-gradient(-45deg, rgba(67, 176, 42, 0) 50%, rgba(67, 176, 42, 1) 50%);
}

.pa-celeste {
  background: rgba(91, 194, 231, 1);
}

.pa-celeste-gradiente {
  background: linear-gradient(-45deg, rgba(91, 194, 231, 0) 50%, rgba(91, 194, 231, 1) 50%);
}

.pa-celeste-2 {
  background: rgba(0, 164, 153, 1);
}

.pa-celeste-2-gradiente {
  background: linear-gradient(-45deg, rgba(0, 164, 153, 0) 50%, rgba(0, 164, 153, 1) 50%);
}

.bg-cd-warning {
  background: #f1B634;
}

.bg-cd-gray {
  background: #666666;
}

.bg-cd-white {
  background: #ffffff;
}

.bg-cd-dark {
  background: #1A1A1A;
}

.bd-cd-primary {
  background: #04243c;
}

.btn-primary {
  --cui-btn-color: rgba(255, 255, 255, 0.87);
  --cui-btn-bg: #04243c;
  --cui-btn-border-color: #04243c;
  --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
  --cui-btn-hover-bg: #000000;
  --cui-btn-hover-border-color: #000000;
  --cui-btn-focus-shadow-rgb: 75, 58, 223;
  --cui-btn-active-color: rgba(255, 255, 255, 0.87);
  --cui-btn-active-bg: #000000;
  --cui-btn-active-border-color: #000000;
  --cui-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 21, 0.125);
  --cui-btn-disabled-color: rgba(255, 255, 255, 0.87);
  --cui-btn-disabled-bg: #04243c;
  --cui-btn-disabled-border-color: #04243c;
}




/* Ejemplo de uso de colores en CSS */

/* Color rojo */
.rojo {
  color: #FF0000; /* Texto rojo */
  background-color: #FF0000; /* Fondo rojo */
}

/* Color verde */
.verde {
  color: #00FF00; /* Texto verde */
  background-color: #00FF00; /* Fondo verde */
}

/* Color azul */
.azul {
  color: #0000FF; /* Texto azul */
  background-color: #0000FF; /* Fondo azul */
}

/* Color amarillo */
.amarillo {
  color: #FFFF00; /* Texto amarillo */
  background-color: #FFFF00; /* Fondo amarillo */
}

/* Color naranja */
.naranja {
  color: #FFA500; /* Texto naranja */
  background-color: #FFA500; /* Fondo naranja */
}

/* Color púrpura */
.purpura {
  color: #800080; /* Texto púrpura */
  background-color: #800080; /* Fondo púrpura */
}

/* Color rosa */
.rosa {
  color: #FFC0CB; /* Texto rosa */
  background-color: #FFC0CB; /* Fondo rosa */
}

/* Color gris */
.gris {
  color: #808080; /* Texto gris */
  background-color: #808080; /* Fondo gris */
}

/* Color marrón */
.marron {
  color: #A52A2A; /* Texto marrón */
  background-color: #A52A2A; /* Fondo marrón */
}

/* Color cian */
.cian {
  color: #00FFFF; /* Texto cian */
  background-color: #00FFFF; /* Fondo cian */
}

/* Color lima */
.lima {
  color: #00FF00; /* Texto lima */
  background-color: #00FF00; /* Fondo lima */
}