:root {
  --color_botonVerde       :  #61A542;
  --color_botonVerde_hover :  #46772F;
  --boton_azul_raxa        :  #2E7FA1;
  --color_azul_raxa_hover  :  #49CBFF;
  --boton_morado           :  #834982;
  --boton_morado_hover     :  #A85EA7;
  --boton_azul_tabla       :  #0C31B5;
  --color_azul_tabla_hover :  #0061FF;
  --boton_rojo_tabla       :  #AB0040;
  --boton_rojo_tabla_hover :  #C8004C;
  --boton_oscuro           :  #2D2D2D;
  --boton_oscuro_hover     :  #C8004C;

}

/*--------------------------------------------------------------*/


.boton_verde
{
  background-color  : var(--color_botonVerde);
  color             : white;
}

.boton_verde:hover 
{
  background-color : var(--color_botonVerde_hover);
  color            : white;
}
/*----------------------------------------------*/

.boton_azul_raxa
{
	background-color : var(--boton_azul_raxa);
	color            : white;
}

.boton_azul_raxa:hover 
{
  background-color : var(--color_azul_raxa_hover);
  color            : white;
}
/*----------------------------------------------*/

/*----------------------------------------------*/

.boton_morado
{
  background-color  : var(--boton_morado);
  color             : white;
}

.boton_morado:hover 
{
  background-color  : var(--boton_morado_hover);
  color             : white;
}
/*----------------------------------------------*/

.btn_redondo
{

  width              : 80px;
  height             : 80px;
  border-radius      : 50%;
}

.btn_redondo_md
{
  text-align         : center;
  width              : 40px;
  height             : 40px;
  border-radius      : 50px;
}
/*----------------------------------------------*/


.label_purpura
{
  background-color    : var(--boton_azul_tabla); 
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_purpura
{
  background-color    : var(--boton_azul_tabla); 
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_purpura:hover
{
  background-color    : var(--color_botonVerde_hover);
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
/*----------------------------------------------*/


.boton_arandano
{
  background-color    : var(--boton_rojo_tabla); 
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_arandano:hover
{
  background-color    : var(--boton_rojo_tabla_hover);
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
/*----------------------------------------------*/


.boton_oscuro
{
  background-color    : #2D2D2D;
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_oscuro:hover
{
  background-color    : #4D4D4D;
  background          : linear-gradient(#7E7E7E, #2D2D2D);
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}

/*----------------------------------------------*/

.boton_login
{
  background-color    : #2E7FA1;
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_login:hover
{
  background-color    : #51DCFF;
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}

/*----------------------------------------------*/

.btn-enviar{
  color              : #fff;
  font-weight        : 600;
  padding            : 10px 45px;
  background-color   : #0B7C00;
  border             : none;
  border-radius      : 2px;
}
.btn-enviar:hover{
  color              : #333;
}

/*----------------------------------------------*/



.boton_tabla_editar
{
  background-color    : var(--boton_azul_tabla); 
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_tabla_editar:hover
{
  background-color    : var(--color_azul_tabla_hover);
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_tabla_borrar
{
  background-color    : var(--boton_rojo_tabla); 
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
.boton_tabla_borrar:hover
{
  background-color    : var(--boton_rojo_tabla_hover);
  border-radius       : 5px;
  color               : white;
  width               : 100%;
  height              : 100%;
}
/*----------------------------------------------*/


.button_neon {
  color           : #61A542;
  border          : 6px solid #61A542;
  border-radius   :15px;
  padding         : 15px 25px;
  font-size       : 30px;
  font-family: tahoma;
  letter-spacing  :5px;
  cursor          : pointer;
  font-weight     : bold;
  filter          : drop-shadow(0 0 15px #db3eb1) drop-shadow(0 0 50px #db3eb1) contrast(2) brightness(2);
  transition      : .5s;
}

.button_neon:hover {
  color: #fff;
  border: 6px solid #61A542;
  background-color: transparent;
  filter: drop-shadow(0 0 15px #db3eb1) drop-shadow(0 0 50px #db3eb1) contrast(2) brightness(2);
}

/*----------------------------------------------*/



.btn-canjear 
{
  position         : relative;
  display          : block;
  color            : #61A542;
  border-radius    : 26px;
  box-sizing       : border-box;
  border           : 2px solid transparent;
  background-color : #0e0e30;
  background-clip  : padding-box;
  overflow         : hidden;
  z-index          : 1;
  border-color     : inherit;
  
  &:hover {
    color           : white;
    background-color: #61A542;
    border-color    : white;
  }
}


/*----------------------------------------------*/
.boton_cuadradito 
{
  background-color: #ff7600;
  border          : none;
  color           : white;
  padding         : 15px 32px;
  text-align      : center;
  text-decoration : none;
  font-size       : 16px;
  display         : inline-block;
  margin          : 4px 2px;
  border-radius   : 0;
}

/*----------------------------------------------*/
.boton_comprar_articulo_redondito 
{
  border-radius     : 50%;
  background-color  : #61A542;
  color             : white;
  border-color      : none;
  outline           : none;
}
.boton_comprar_articulo_redondito_agotado
{
  border-radius     : 50%;
  background-color  : #404040;
  color             : white;
  border-color      : none;
  outline           : none;
}


/*----------------------------------------------*/
/* CSS */
.boton_cliente_articulo_entregado {
  appearance         : none;
  background-color   : #2ea44f;
  border             : 1px solid rgba(27, 31, 35, .15);
  border-radius      : 6px;
  box-shadow         : rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing         : border-box;
  color              : #fff;
  cursor             : pointer;
  display            : inline-block;
  font-family        : -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size          : 10px;
  font-weight        : 600;
  line-height        : 20px;
  padding            : 0px 10px;
  position           : relative;
  text-align         : center;
  text-decoration    : none;
  user-select        : none;
  -webkit-user-select: none;
  touch-action       : manipulation;
  vertical-align     : middle;
  white-space        : nowrap;
}


.boton_cliente_articulo_entregado:hover {
  background-color: #2c974b;
}
.boton_cliente_articulo_cancelar {
  appearance         : none;
  background-color   : #D10226;
  border             : 1px solid rgba(27, 31, 35, .15);
  border-radius      : 6px;
  box-shadow         : rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing         : border-box;
  color              : #fff;
  cursor             : pointer;
  display            : inline-block;
  font-family        : -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size          : 10px;
  font-weight        : 600;
  line-height        : 20px;
  padding            : 0px 10px;
  position           : relative;
  text-align         : center;
  text-decoration    : none;
  user-select        : none;
  -webkit-user-select: none;
  touch-action       : manipulation;
  vertical-align     : middle;
  white-space        : nowrap;
}


.boton_cliente_articulo_cancelar:hover {
  background-color: #e62143;
}
.boton_cliente_articulo_recoger {
  appearance         : none;
  background-color   : #004CBE;
  border             : 1px solid rgba(27, 31, 35, .15);
  border-radius      : 6px;
  box-shadow         : rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing         : border-box;
  color              : #fff;
  cursor             : pointer;
  display            : inline-block;
  font-family        : -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size          : 10px;
  font-weight        : 600;
  line-height        : 20px;
  padding            : 0px 10px;
  position           : relative;
  text-align         : center;
  text-decoration    : none;
  user-select        : none;
  -webkit-user-select: none;
  touch-action       : manipulation;
  vertical-align     : middle;
  white-space        : nowrap;
}


.boton_cliente_articulo_recoger:hover {
  background-color: #3385ff;
}
/*----------------------------------------------*/
/* CSS */



/* CSS */
.boton_azul_con_brillo {
  background-color          : #0078d0;
  border                    : 0;
  border-radius             : 56px;
  color                     : #fff;
  cursor                    : pointer;
  display                   : inline-block;
  font-family               : system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size                 : 18px;
  font-weight               : 600;
  outline                   : 0;
  padding                   : 16px 21px;
  position                  : relative;
  text-align                : center;
  text-decoration           : none;
  transition                : all .3s;
  user-select               : none;
  -webkit-user-select       : none;
  touch-action              : manipulation;
}

.boton_azul_con_brillo:before {
  background-color          : initial;
  background-image          : linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius             : 125px;
  content                   : "";
  height                    : 50%;
  left                      : 4%;
  opacity                   : .5;
  position                  : absolute;
  top                       : 0;
  transition                : all .3s;
  width                     : 92%;
}

.boton_azul_con_brillo:hover {
  box-shadow                : rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform                 : scale(1.05);
}

@media (min-width: 768px) 
{
  .boton_azul_con_brillo 
  {
    padding: 16px 48px;
  }
}/*----------------------------------------------*/
/* CSS */










/* -------------------------------------------*/
/* BOTONES PARA EL FORMULARIO DE CUNADO EL CLIENTE QUIERE CANCELAR UN PRODUCTO
/* -------------------------------------------*/
.btn_standarRedondeado_cancelar_producto_desde_cliente
{
  border-radius       : 50px;
  max-width           : 100%;
  width               : 100%;
  background-image    : linear-gradient(to top, rgb(0 0 0), rgb(182 49 167));
  border              : 0;
}


.btn_standarRedondeado_cancelar_producto_desde_cliente:hover
{
  border-radius       : 50px;
  max-width           : 100%;
  width               : 100%;
  background-image    : linear-gradient(to top, rgb(0 0 0), rgb(255 45 73));
  border              : 0;
  color               : white;
}

.a_standarRedondeado_cancelar_producto_desde_cliente:link
{ 
  text-decoration     : none; 
}

.card_cancelacionRealizada
{
  box-sizing          : border-box;
  width               : 100%;
  height              : 254px;
  background          : rgba(217, 217, 217, 0.58);
  border              : 1px solid white;
  box-shadow          : 12px 17px 51px rgba(0, 0, 0, 0.22);
  backdrop-filter     : blur(6px);
  border-radius       : 17px;
  text-align          : center;
  transition          : all 0.5s;
  display             : flex;
  align-items         : center;
  justify-content     : center;
  user-select         : none;
  font-weight         : bolder;
  color               : black;
}
/* -------------------------------------------*/






.circulo_validacion_verde 
{
  height           : 25px;
  width            : 25px;
  margin-left      : 2px;
  background-color : #00FF04;
  border-radius    : 50%;
  display          : inline-block;
  text-align       : center;
  line-height      : 1.5; /* Ajusta el valor según sea necesario para la alineación vertical deseada */
  display          : inline-block; /* Para asegurarse de que el line-height se aplique correctamente */
  height           : 1.5em; /* Ajusta la altura según sea necesario */
  font-size        : 14px;
  font-weight      : bold;
  color            : black;
}
.circulo_validacion_rojo
{
  height           : 25px;
  width            : 25px;
  margin-left      : 2px;
  background-color : #FF0000;
  border-radius    : 50%;
  display          : inline-block;
  text-align       : center;
  line-height      : 1.5; /* Ajusta el valor según sea necesario para la alineación vertical deseada */
  display          : inline-block; /* Para asegurarse de que el line-height se aplique correctamente */
  height           : 1.5em; /* Ajusta la altura según sea necesario */
  font-size        : 14px;
  font-weight      : bold;
  color            : white;
}
.circulo_validacion_naranja
{
  height           : 25px;
  width            : 25px;
  margin-left      : 2px;
  background-color : #FFB600;
  border-radius    : 50%;
  display          : inline-block;
  text-align       : center;
  line-height      : 1.5; /* Ajusta el valor según sea necesario para la alineación vertical deseada */
  display          : inline-block; /* Para asegurarse de que el line-height se aplique correctamente */
  height           : 1.5em; /* Ajusta la altura según sea necesario */
  font-size        : 14px;
  font-weight      : bold;
  color            : black;
}